@cleartrip/ct-design-animate 2.0.0 → 4.0.0-SNAPSHOT-rnfinaltest.0

package/README.md

@@ -0,0 +1,68 @@
+# Animate
+
+A wrapper component that provides animation utilities for child elements.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-animate
+# or
+pnpm add @cleartrip/ct-design-animate
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { Animate } from '@cleartrip/ct-design-animate';
+
+function Example() {
+  return (
+    <Animate>
+      {/* Basic usage */}
+    </Animate>
+  );
+}
+```
+
+---
+
+## AnimationVariant
+
+- `SHAKE` — SHAKE
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { Animate } from 'yagami/core/components';
++ import { Animate } from '@cleartrip/ct-design-animate';
+```

package/dist/Animate.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnimateProps } from './type';
 declare const Animate: React.FC<AnimateProps>;
 export default Animate;

package/dist/Animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Animate.d.ts","sourceRoot":"","sources":["../packages/components/Animate/src/Animate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAoB,MAAM,QAAQ,CAAC;AAExD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAOnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Animate.d.ts","sourceRoot":"","sources":["../packages/components/Animate/src/Animate.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAoB,MAAM,QAAQ,CAAC;AAExD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAOnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Shake.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shake.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/Shake.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAoB,MAAM,SAAS,CAAC;AAGhE,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAOxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Shake.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/Shake.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAc9C,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAKxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/ct-design-animate.browser.cjs.js

@@ -1,2 +1,30 @@
-"use strict";var n=require("tslib"),t=require("react/jsx-runtime"),a=require("styled-components");function r(n){return n&&n.__esModule?n:{default:n}}var i=r(a);exports.AnimationVariant=void 0,(exports.AnimationVariant||(exports.AnimationVariant={})).SHAKE="SHAKE";var e,s,o,m=a.keyframes(e||(e=n.__makeTemplateObject(["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"],["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"]))),l=i.default.div((function(t){var r=t.variant,i=t.show,e=void 0!==i&&i,l=t.css,d=void 0===l?{}:l,c=e?function(t){if(t===exports.AnimationVariant.SHAKE)return a.css(s||(s=n.__makeTemplateObject(["\n        animation: "," 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "],["\n        animation: "," 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "])),m)}(r):"";return a.css(o||(o=n.__makeTemplateObject(["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ","\n      ",";\n    "],["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ","\n      ",";\n    "])),c,d)})),d=function(a){var r=a.children,i=a.animate,e=a.styleConfig,s=(null!=e?e:{}).root,o=void 0===s?{}:s;return t.jsx(l,n.__assign({css:null==o?void 0:o.css,variant:exports.AnimationVariant.SHAKE,show:i},{children:r}))};exports.Animate=function(a){var r=a.variant,i=n.__rest(a,["variant"]);return r===exports.AnimationVariant.SHAKE?t.jsx(d,n.__assign({},i)):t.jsx(t.Fragment,{children:i.children})};
+"use strict";var r=require("tslib"),t=require("react/jsx-runtime"),e=require("@emotion/css"),a=require("@cleartrip/ct-design-style-manager");const i=e.keyframes`
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+`,n=e.css`
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation: ${i} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+`,s=({children:r,styleConfig:e})=>{const{root:i=[]}=null!=e?e:{},s=a.useWebMergeStyles([...i,n],[i,n]);return t.jsx("div",{className:s,children:r})};exports.AnimationVariant=void 0,(exports.AnimationVariant||(exports.AnimationVariant={})).SHAKE="SHAKE";exports.Animate=e=>{var{variant:a}=e,i=r.__rest(e,["variant"]);return a===exports.AnimationVariant.SHAKE?t.jsx(s,Object.assign({},i)):t.jsx(t.Fragment,{children:i.children})};
 //# sourceMappingURL=ct-design-animate.browser.cjs.js.map

package/dist/ct-design-animate.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-animate.browser.cjs.js","sources":["../packages/components/Animate/src/type.ts","../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["AnimationVariant","shakeKeyFrame","keyframes","templateObject_1","__makeTemplateObject","StyledAnimation","styled","default","div","_a","variant","_b","show","_c","css","styleCss","Animation","SHAKE","templateObject_2","getAnimationPropsFromVariant","templateObject_3","Shake","children","animate","styleConfig","root","_jsx","__assign","props","__rest","_Fragment"],"mappings":"gKAIYA,QAEXA,sBAAA,GAFWA,QAAgBA,mBAAhBA,yBAEX,CAAA,IADC,MAAA,QCAF,UAAMC,EAAgBC,EAASA,UAAAC,IAAAA,EAAAC,EAAAA,qBAAA,CAAA,wTAAA,CAAA,2TAoClBC,EAAkBC,EAAMC,QAACC,KACpC,SAACC,GACC,IAAAC,EAAOD,EAAAC,QACPC,EAAYF,EAAAG,KAAZA,OAAO,IAAAD,GAAKA,EACZE,EAAkBJ,EAAAK,IAAbC,OAAQ,IAAAF,EAAG,CAAE,EAAAA,EAEZG,EAAYJ,EAnBe,SAACF,GACpC,GAAQA,IACDV,QAAAA,iBAAiBiB,MACpB,OAAOH,EAAGA,IAAAI,IAAAA,EAAAd,EAAAA,qBAAA,CAAA,wBAAA,2KAAA,CAAA,wBACkB,6KAAbH,EAOrB,CAQ6BkB,CAA6BT,GAAW,GAEjE,OAAOI,EAAAA,IAAGM,IAAAA,EAAAhB,EAAAA,qBAAA,CAAA,4EAAA,WAAA,WAAA,CAAA,4EAGG,WACkC,aAD3CY,EACAD,EAEN,IClDIM,EAAuC,SAACZ,GAAE,IAAAa,aAAUC,EAAOd,EAAAc,QAAEC,EAAWf,EAAAe,YACpEb,GAAca,QAAAA,EAAe,CAAA,QAA7BC,OAAO,IAAAd,EAAA,CAAE,IACjB,OACEe,MAACrB,EAAgBsB,EAAAA,SAAA,CAAAb,IAAKW,aAAA,EAAAA,EAAMX,IAAKJ,QAASV,yBAAiBiB,MAAOL,KAAMW,GACrE,CAAAD,SAAAA,IAGP,kBCTwC,SAACb,GAAE,IAAAC,EAAOD,EAAAC,QAAKkB,EAAKC,EAAAA,OAAApB,EAAnB,aACvC,OAAQC,IACDV,QAAgBA,iBAACiB,MACbS,EAAAA,IAACL,EAAUM,EAAAA,SAAA,CAAA,EAAAC,IAEXF,EAAAA,IAAGI,EAAAA,SAAA,CAAAR,SAAAM,EAAMN,UAEtB"}
+{"version":3,"file":"ct-design-animate.browser.cjs.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["shakeKeyFrame","keyframes","shakeClassName","css","Shake","children","styleConfig","root","rootClassName","useWebMergeStyles","_jsx","className","AnimationVariant","_a","variant","props","__rest","SHAKE","Object","assign","_Fragment"],"mappings":"6IAEO,MAAMA,EAAgBC,EAASA,SAAA;;;;;;;;;;;;;;;;;;;;;ECKhCC,EAAiBC,EAAGA,GAAA;;;eAGXH;;;;EAMTI,EAAuC,EAAGC,WAAUC,kBACxD,MAAMC,KAAEA,EAAO,IAAOD,QAAAA,EAAe,GAE/BE,EAAgBC,oBAAkB,IAAIF,EAAML,GAAiB,CAACK,EAAML,IAC1E,OAAOQ,EAAAA,WAAKC,UAAWH,EAAgBH,SAAAA,KChB7BO,QAEXA,sBAAA,GAFWA,QAAgBA,mBAAhBA,yBAEX,CAAA,IADC,MAAA,wBCFuCC,IAAA,IAAAC,QAAEA,GAAmBD,EAAPE,EAAKC,EAAAA,OAAAH,EAAnB,aACvC,OAAQC,IACDF,QAAgBA,iBAACK,MACbP,EAAAA,IAACN,EAAUc,OAAAC,OAAA,CAAA,EAAAJ,IAEXL,EAAAA,IAAGU,EAAAA,SAAA,CAAAf,SAAAU,EAAMV"}

package/dist/ct-design-animate.browser.esm.js

@@ -1,2 +1,30 @@
-import{__makeTemplateObject as n,__assign as t,__rest as r}from"tslib";import{jsx as a,Fragment as i}from"react/jsx-runtime";import o,{keyframes as e,css as s}from"styled-components";var d;!function(n){n.SHAKE="SHAKE"}(d||(d={}));var l,m,c,f=e(l||(l=n(["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"],["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"]))),p=o.div((function(t){var r=t.variant,a=t.show,i=void 0!==a&&a,o=t.css,e=void 0===o?{}:o,l=i?function(t){if(t===d.SHAKE)return s(m||(m=n(["\n        animation: "," 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "],["\n        animation: "," 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "])),f)}(r):"";return s(c||(c=n(["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ","\n      ",";\n    "],["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ","\n      ",";\n    "])),l,e)})),v=function(n){var r=n.children,i=n.animate,o=n.styleConfig,e=(null!=o?o:{}).root,s=void 0===e?{}:e;return a(p,t({css:null==s?void 0:s.css,variant:d.SHAKE,show:i},{children:r}))},u=function(n){var o=n.variant,e=r(n,["variant"]);return o===d.SHAKE?a(v,t({},e)):a(i,{children:e.children})};export{u as Animate,d as AnimationVariant};
+import{__rest as t}from"tslib";import{jsx as r,Fragment as n}from"react/jsx-runtime";import{keyframes as a,css as i}from"@emotion/css";import{useWebMergeStyles as e}from"@cleartrip/ct-design-style-manager";const o=i`
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation: ${a`
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+`} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+`,s=({children:t,styleConfig:n})=>{const{root:a=[]}=null!=n?n:{},i=e([...a,o],[a,o]);return r("div",{className:i,children:t})};var m;!function(t){t.SHAKE="SHAKE"}(m||(m={}));const c=a=>{var{variant:i}=a,e=t(a,["variant"]);return i===m.SHAKE?r(s,Object.assign({},e)):r(n,{children:e.children})};export{c as Animate,m as AnimationVariant};
 //# sourceMappingURL=ct-design-animate.browser.esm.js.map

package/dist/ct-design-animate.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-animate.browser.esm.js","sources":["../packages/components/Animate/src/type.ts","../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["AnimationVariant","shakeKeyFrame","keyframes","templateObject_1","__makeTemplateObject","StyledAnimation","styled","div","_a","variant","_b","show","_c","css","styleCss","Animation","SHAKE","templateObject_2","getAnimationPropsFromVariant","templateObject_3","Shake","children","animate","styleConfig","root","_jsx","__assign","Animate","props","__rest","_Fragment"],"mappings":"2LAIYA,GAAZ,SAAYA,GACVA,EAAA,MAAA,OACD,CAFD,CAAYA,IAAAA,EAEX,CAAA,ICDD,UAAMC,EAAgBC,EAASC,IAAAA,EAAAC,EAAA,CAAA,wTAAA,CAAA,2TAoClBC,EAAkBC,EAAOC,KACpC,SAACC,GACC,IAAAC,EAAOD,EAAAC,QACPC,EAAYF,EAAAG,KAAZA,OAAO,IAAAD,GAAKA,EACZE,EAAkBJ,EAAAK,IAAbC,OAAQ,IAAAF,EAAG,CAAE,EAAAA,EAEZG,EAAYJ,EAnBe,SAACF,GACpC,GAAQA,IACDT,EAAiBgB,MACpB,OAAOH,EAAGI,IAAAA,EAAAb,EAAA,CAAA,wBAAA,2KAAA,CAAA,wBACkB,6KAAbH,EAOrB,CAQ6BiB,CAA6BT,GAAW,GAEjE,OAAOI,EAAGM,IAAAA,EAAAf,EAAA,CAAA,4EAAA,WAAA,WAAA,CAAA,4EAGG,WACkC,aAD3CW,EACAD,EAEN,IClDIM,EAAuC,SAACZ,GAAE,IAAAa,aAAUC,EAAOd,EAAAc,QAAEC,EAAWf,EAAAe,YACpEb,GAAca,QAAAA,EAAe,CAAA,QAA7BC,OAAO,IAAAd,EAAA,CAAE,IACjB,OACEe,EAACpB,EAAgBqB,EAAA,CAAAb,IAAKW,aAAA,EAAAA,EAAMX,IAAKJ,QAAST,EAAiBgB,MAAOL,KAAMW,GACrE,CAAAD,SAAAA,IAGP,ECTMM,EAAkC,SAACnB,GAAE,IAAAC,EAAOD,EAAAC,QAAKmB,EAAKC,EAAArB,EAAnB,aACvC,OAAQC,IACDT,EAAiBgB,MACbS,EAACL,EAAUM,EAAA,CAAA,EAAAE,IAEXH,EAAGK,EAAA,CAAAT,SAAAO,EAAMP,UAEtB"}
+{"version":3,"file":"ct-design-animate.browser.esm.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["shakeClassName","css","keyframes","Shake","children","styleConfig","root","rootClassName","useWebMergeStyles","_jsx","className","AnimationVariant","Animate","_a","variant","props","__rest","SHAKE","Object","assign","_Fragment"],"mappings":"8MAEO,MCKDA,EAAiBC,CAAG;;;eDLGC,CAAS;;;;;;;;;;;;;;;;;;;;;;;;;ECchCC,EAAuC,EAAGC,WAAUC,kBACxD,MAAMC,KAAEA,EAAO,IAAOD,QAAAA,EAAe,GAE/BE,EAAgBC,EAAkB,IAAIF,EAAMN,GAAiB,CAACM,EAAMN,IAC1E,OAAOS,SAAKC,UAAWH,EAAgBH,SAAAA,SChB7BO,GAAZ,SAAYA,GACVA,EAAA,MAAA,OACD,CAFD,CAAYA,IAAAA,EAEX,CAAA,ICHD,MAAMC,EAAmCC,IAAA,IAAAC,QAAEA,GAAmBD,EAAPE,EAAKC,EAAAH,EAAnB,aACvC,OAAQC,IACDH,EAAiBM,MACbR,EAACN,EAAUe,OAAAC,OAAA,CAAA,EAAAJ,IAEXN,EAAGW,EAAA,CAAAhB,SAAAW,EAAMX"}

package/dist/ct-design-animate.cjs.js

@@ -2,43 +2,56 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
+var css = require('@emotion/css');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+const shakeKeyFrame = css.keyframes `
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
 
-var styled__default = /*#__PURE__*/_interopDefault(styled);
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+`;
+
+const shakeClassName = css.css `
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation: ${shakeKeyFrame} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+`;
+const Shake = ({ children, styleConfig }) => {
+    const { root = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const rootClassName = ctDesignStyleManager.useWebMergeStyles([...root, shakeClassName], [root, shakeClassName]);
+    return jsxRuntime.jsx("div", { className: rootClassName, children: children });
+};
 
 exports.AnimationVariant = void 0;
 (function (AnimationVariant) {
     AnimationVariant["SHAKE"] = "SHAKE";
 })(exports.AnimationVariant || (exports.AnimationVariant = {}));
 
-var shakeKeyFrame = styled.keyframes(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"], ["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"])));
-var getAnimationPropsFromVariant = function (variant) {
-    switch (variant) {
-        case exports.AnimationVariant.SHAKE: {
-            return styled.css(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n        animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "], ["\n        animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "])), shakeKeyFrame);
-        }
-    }
-};
-var StyledAnimation = styled__default.default.div(function (_a) {
-    var variant = _a.variant, _b = _a.show, show = _b === void 0 ? false : _b, _c = _a.css, styleCss = _c === void 0 ? {} : _c;
-    var Animation = show ? getAnimationPropsFromVariant(variant) : '';
-    return styled.css(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ", "\n      ", ";\n    "], ["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ", "\n      ", ";\n    "])), Animation, styleCss);
-});
-var templateObject_1, templateObject_2, templateObject_3;
-
-var Shake = function (_a) {
-    var children = _a.children, animate = _a.animate, styleConfig = _a.styleConfig;
-    var _b = (styleConfig !== null && styleConfig !== void 0 ? styleConfig : {}).root, root = _b === void 0 ? {} : _b;
-    return (jsxRuntime.jsx(StyledAnimation, tslib.__assign({ css: root === null || root === void 0 ? void 0 : root.css, variant: exports.AnimationVariant.SHAKE, show: animate }, { children: children })));
-};
-
-var Animate = function (_a) {
-    var variant = _a.variant, props = tslib.__rest(_a, ["variant"]);
+const Animate = (_a) => {
+    var { variant } = _a, props = tslib.__rest(_a, ["variant"]);
     switch (variant) {
         case exports.AnimationVariant.SHAKE:
-            return jsxRuntime.jsx(Shake, tslib.__assign({}, props));
+            return jsxRuntime.jsx(Shake, Object.assign({}, props));
         default:
             return jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
     }

package/dist/ct-design-animate.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-animate.cjs.js","sources":["../packages/components/Animate/src/type.ts","../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["AnimationVariant","keyframes","__makeTemplateObject","css","styled","_jsx","__assign","__rest","_Fragment"],"mappings":";;;;;;;;;;AAIYA,kCAEX;AAFD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAFWA,wBAAgB,KAAhBA,wBAAgB,GAE3B,EAAA,CAAA,CAAA;;ACDD,IAAM,aAAa,GAAGC,gBAAS,CAAA,gBAAA,KAAA,gBAAA,GAAAC,0BAAA,CAAA,CAAA,sTAAA,CAAA,EAAA,CAAA,sTAqB9B,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,UAAC,OAAyB,EAAA;AAC7D,IAAA,QAAQ,OAAO;AACb,QAAA,KAAKF,wBAAgB,CAAC,KAAK,EAAE;AAC3B,YAAA,OAAOG,UAAG,CAAA,gBAAA,KAAA,gBAAA,GAAAD,0BAAA,CAAA,CAAA,uBAAA,EAAA,yKAAA,CAAA,EAAA,CAAA,uBACK,EAAa,yKAI3B,CAAA,CAAA,CAAA,EAJc,aAAa,CAI1B,CAAA;AACH,SAAA;AACF,KAAA;AACH,CAAC,CAAC;AAEK,IAAM,eAAe,GAAGE,uBAAM,CAAC,GAAG,CACvC,UAAC,EAIwF,EAAA;AAHvF,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,EAAY,GAAA,EAAA,CAAA,IAAA,EAAZ,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,EACZ,EAAkB,GAAA,EAAA,CAAA,GAAA,EAAb,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;AAElB,IAAA,IAAM,SAAS,GAAG,IAAI,GAAG,4BAA4B,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;IAEpE,OAAOD,UAAG,CAAA,gBAAA,KAAA,gBAAA,GAAAD,0BAAA,CAAA,CAAA,2EAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,CAAA,2EAGN,EAAS,UACT,EAA2C,SAC9C,CAFG,CAAA,CAAA,EAAA,SAAS,EACT,QAA2C,CAC7C,CAAA;AACJ,CAAC,CACF,CAAC;;;ACnDF,IAAM,KAAK,GAAkC,UAAC,EAAkC,EAAA;AAAhC,IAAA,IAAA,QAAQ,cAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA;AACpE,IAAA,IAAA,KAAc,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,cAAX,WAAW,GAAI,EAAE,MAAtB,EAAT,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA,CAAuB;IACxC,QACEG,cAAC,CAAA,eAAe,EAACC,cAAA,CAAA,EAAA,GAAG,EAAE,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,GAAG,EAAE,OAAO,EAAEN,wBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAC5E,EAAA,EAAA,QAAA,EAAA,QAAQ,EACO,CAAA,CAAA,EAClB;AACJ,CAAC;;ACTK,IAAA,OAAO,GAA2B,UAAC,EAAqB,EAAA;AAAnB,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,EAAK,KAAK,GAAAO,YAAA,CAAA,EAAA,EAAnB,WAAqB,CAAF,CAAA;AAC1D,IAAA,QAAQ,OAAO;QACb,KAAKP,wBAAgB,CAAC,KAAK;AACzB,YAAA,OAAOK,cAAC,CAAA,KAAK,EAAKC,cAAA,CAAA,EAAA,EAAA,KAAK,EAAI,CAAC;AAC9B,QAAA;AACE,YAAA,OAAOD,cAAG,CAAAG,mBAAA,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAI,CAAC;AAChC,KAAA;AACH;;;;"}
+{"version":3,"file":"ct-design-animate.cjs.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["keyframes","css","useWebMergeStyles","_jsx","AnimationVariant","__rest","_Fragment"],"mappings":";;;;;;;AAEO,MAAM,aAAa,GAAGA,aAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBrC;;AChBD,MAAM,cAAc,GAAGC,OAAG,CAAA,CAAA;;;eAGX,aAAa,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,KAAK,GAAkC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;AACzE,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAX,WAAW,GAAI,EAAE,CAAC;AAExC,IAAA,MAAM,aAAa,GAAGC,sCAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;AAC3F,IAAA,OAAOC,wBAAK,SAAS,EAAE,aAAa,EAAG,QAAA,EAAA,QAAQ,GAAO,CAAC;AACzD,CAAC;;ACjBWC,kCAEX;AAFD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAFWA,wBAAgB,KAAhBA,wBAAgB,GAE3B,EAAA,CAAA,CAAA;;ACHD,MAAM,OAAO,GAA2B,CAAC,EAAqB,KAAI;AAAzB,IAAA,IAAA,EAAE,OAAO,EAAY,GAAA,EAAA,EAAP,KAAK,GAAAC,YAAA,CAAA,EAAA,EAAnB,WAAqB,CAAF,CAAA;IAC1D,QAAQ,OAAO;QACb,KAAKD,wBAAgB,CAAC,KAAK;AACzB,YAAA,OAAOD,cAAC,CAAA,KAAK,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAI,CAAC;AAC9B,QAAA;AACE,YAAA,OAAOA,cAAG,CAAAG,mBAAA,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAI,CAAC;KAChC;AACH;;;;"}

package/dist/ct-design-animate.esm.js

@@ -1,38 +1,55 @@
-import { __makeTemplateObject, __assign, __rest } from 'tslib';
+import { __rest } from 'tslib';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import styled, { keyframes, css } from 'styled-components';
+import { keyframes, css } from '@emotion/css';
+import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+
+const shakeKeyFrame = keyframes `
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+`;
+
+const shakeClassName = css `
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation: ${shakeKeyFrame} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+`;
+const Shake = ({ children, styleConfig }) => {
+    const { root = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const rootClassName = useWebMergeStyles([...root, shakeClassName], [root, shakeClassName]);
+    return jsx("div", { className: rootClassName, children: children });
+};
 
 var AnimationVariant;
 (function (AnimationVariant) {
     AnimationVariant["SHAKE"] = "SHAKE";
 })(AnimationVariant || (AnimationVariant = {}));
 
-var shakeKeyFrame = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"], ["\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n"])));
-var getAnimationPropsFromVariant = function (variant) {
-    switch (variant) {
-        case AnimationVariant.SHAKE: {
-            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "], ["\n        animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      "])), shakeKeyFrame);
-        }
-    }
-};
-var StyledAnimation = styled.div(function (_a) {
-    var variant = _a.variant, _b = _a.show, show = _b === void 0 ? false : _b, _c = _a.css, styleCss = _c === void 0 ? {} : _c;
-    var Animation = show ? getAnimationPropsFromVariant(variant) : '';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ", "\n      ", ";\n    "], ["\n      animation-duration: 1s;\n      animation-fill-mode: both;\n      ", "\n      ", ";\n    "])), Animation, styleCss);
-});
-var templateObject_1, templateObject_2, templateObject_3;
-
-var Shake = function (_a) {
-    var children = _a.children, animate = _a.animate, styleConfig = _a.styleConfig;
-    var _b = (styleConfig !== null && styleConfig !== void 0 ? styleConfig : {}).root, root = _b === void 0 ? {} : _b;
-    return (jsx(StyledAnimation, __assign({ css: root === null || root === void 0 ? void 0 : root.css, variant: AnimationVariant.SHAKE, show: animate }, { children: children })));
-};
-
-var Animate = function (_a) {
-    var variant = _a.variant, props = __rest(_a, ["variant"]);
+const Animate = (_a) => {
+    var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
         case AnimationVariant.SHAKE:
-            return jsx(Shake, __assign({}, props));
+            return jsx(Shake, Object.assign({}, props));
         default:
             return jsx(Fragment, { children: props.children });
     }

package/dist/ct-design-animate.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-animate.esm.js","sources":["../packages/components/Animate/src/type.ts","../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["_jsx","_Fragment"],"mappings":";;;;IAIY,iBAEX;AAFD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAFW,gBAAgB,KAAhB,gBAAgB,GAE3B,EAAA,CAAA,CAAA;;ACDD,IAAM,aAAa,GAAG,SAAS,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,sTAAA,CAAA,EAAA,CAAA,sTAqB9B,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,UAAC,OAAyB,EAAA;AAC7D,IAAA,QAAQ,OAAO;AACb,QAAA,KAAK,gBAAgB,CAAC,KAAK,EAAE;AAC3B,YAAA,OAAO,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,uBAAA,EAAA,yKAAA,CAAA,EAAA,CAAA,uBACK,EAAa,yKAI3B,CAAA,CAAA,CAAA,EAJc,aAAa,CAI1B,CAAA;AACH,SAAA;AACF,KAAA;AACH,CAAC,CAAC;AAEK,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,UAAC,EAIwF,EAAA;AAHvF,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,EAAY,GAAA,EAAA,CAAA,IAAA,EAAZ,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,EACZ,EAAkB,GAAA,EAAA,CAAA,GAAA,EAAb,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;AAElB,IAAA,IAAM,SAAS,GAAG,IAAI,GAAG,4BAA4B,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;IAEpE,OAAO,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,2EAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,CAAA,2EAGN,EAAS,UACT,EAA2C,SAC9C,CAFG,CAAA,CAAA,EAAA,SAAS,EACT,QAA2C,CAC7C,CAAA;AACJ,CAAC,CACF,CAAC;;;ACnDF,IAAM,KAAK,GAAkC,UAAC,EAAkC,EAAA;AAAhC,IAAA,IAAA,QAAQ,cAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA;AACpE,IAAA,IAAA,KAAc,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,cAAX,WAAW,GAAI,EAAE,MAAtB,EAAT,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA,CAAuB;IACxC,QACEA,GAAC,CAAA,eAAe,EAAC,QAAA,CAAA,EAAA,GAAG,EAAE,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAC5E,EAAA,EAAA,QAAA,EAAA,QAAQ,EACO,CAAA,CAAA,EAClB;AACJ,CAAC;;ACTK,IAAA,OAAO,GAA2B,UAAC,EAAqB,EAAA;AAAnB,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,EAAK,KAAK,GAAA,MAAA,CAAA,EAAA,EAAnB,WAAqB,CAAF,CAAA;AAC1D,IAAA,QAAQ,OAAO;QACb,KAAK,gBAAgB,CAAC,KAAK;AACzB,YAAA,OAAOA,GAAC,CAAA,KAAK,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EAAI,CAAC;AAC9B,QAAA;AACE,YAAA,OAAOA,GAAG,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAI,CAAC;AAChC,KAAA;AACH;;;;"}
+{"version":3,"file":"ct-design-animate.esm.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["_jsx","_Fragment"],"mappings":";;;;;AAEO,MAAM,aAAa,GAAG,SAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBrC;;AChBD,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;eAGX,aAAa,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,KAAK,GAAkC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;AACzE,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAX,WAAW,GAAI,EAAE,CAAC;AAExC,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;AAC3F,IAAA,OAAOA,aAAK,SAAS,EAAE,aAAa,EAAG,QAAA,EAAA,QAAQ,GAAO,CAAC;AACzD,CAAC;;ICjBW,iBAEX;AAFD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAFW,gBAAgB,KAAhB,gBAAgB,GAE3B,EAAA,CAAA,CAAA;;ACHD,MAAM,OAAO,GAA2B,CAAC,EAAqB,KAAI;AAAzB,IAAA,IAAA,EAAE,OAAO,EAAY,GAAA,EAAA,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAnB,WAAqB,CAAF,CAAA;IAC1D,QAAQ,OAAO;QACb,KAAK,gBAAgB,CAAC,KAAK;AACzB,YAAA,OAAOA,GAAC,CAAA,KAAK,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAI,CAAC;AAC9B,QAAA;AACE,YAAA,OAAOA,GAAG,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAI,CAAC;KAChC;AACH;;;;"}