@cleartrip/ct-design-dotted-loader 4.0.0 → 5.0.0

package/README.md

@@ -0,0 +1,80 @@
+# DottedLoader
+
+A loading indicator with animated dots.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-dotted-loader
+# or
+pnpm add @cleartrip/ct-design-dotted-loader
+```
+
+### 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 { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+
+function Example() {
+  return (
+    <DottedLoader>
+      {/* Basic usage */}
+    </DottedLoader>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `variant` | `LoaderVariant` | — | No | Size variant for the loader dots. Defaults to `'medium'`. |
+| `styleConfig` | `IDottedLoaderStyleConfig` | — | No | `styleConfig` slots for fine-grained style overrides. |
+| `css` | `CSSProperties` | — | No | existing overrides continue to win on web. |
+
+---
+
+## DottedLoaderSize
+
+- `SMALL` — small
+- `MEDIUM` — medium
+- `LARGE` — large
+---
+
+## 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 { DottedLoader } from 'yagami/core/components';
++ import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+```

package/dist/DottedLoader.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
-import { ForwardRefComponentWithStyle } from '@cleartrip/ct-design-types';
+import { ContainerRef } from '@cleartrip/ct-design-container';
 import { IDottedLoaderProps } from './type';
-type PolymorphicLoader = ForwardRefComponentWithStyle<'div', IDottedLoaderProps>;
-declare const _default: import("react").MemoExoticComponent<PolymorphicLoader>;
-export default _default;
+declare const DottedLoader: import("react").NamedExoticComponent<IDottedLoaderProps & import("react").RefAttributes<ContainerRef>>;
+export default DottedLoader;
 //# sourceMappingURL=DottedLoader.d.ts.map

package/dist/DottedLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DottedLoader.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/DottedLoader.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,KAAK,iBAAiB,GAAG,4BAA4B,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;;AA0BjF,wBAAkC"}
+{"version":3,"file":"DottedLoader.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/DottedLoader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKzE,OAAO,EAAQ,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAkDlD,QAAA,MAAM,YAAY,wGAkBjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/DottedLoader.native.d.ts

@@ -0,0 +1,5 @@
+import { ContainerRef } from '@cleartrip/ct-design-container';
+import { IDottedLoaderProps } from './type';
+declare const DottedLoader: import("react").NamedExoticComponent<IDottedLoaderProps & import("react").RefAttributes<ContainerRef>>;
+export default DottedLoader;
+//# sourceMappingURL=DottedLoader.native.d.ts.map

package/dist/DottedLoader.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DottedLoader.native.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/DottedLoader.native.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKzE,OAAO,EAAQ,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AA6FlD,QAAA,MAAM,YAAY,wGAYjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum DottedLoaderSize {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../packages/components/DottedLoader/src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}

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

@@ -1,2 +1,6 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),n=require("react"),a=require("@cleartrip/ct-design-theme"),o=require("styled-components");function t(e){return e&&e.__esModule?e:{default:e}}var s,i,c=t(o),l=c.default.div((function(r){var n=r.theme,a=r.dotId,t=r.variant,c=r.css,l=void 0===c?{}:c,u=function(e,r){switch(e){case"large":return r.size[3];case"medium":return r.size[2];default:return r.size[1]}}(t,n);return o.css(i||(i=e.__makeTemplateObject(["\n      height: ",";\n      width: ",";\n      border-radius: ",";\n      background: ",";\n      animation: ","\n        ease-in-out 1s infinite;\n      animation-delay: ","s;\n      ",";\n    "],["\n      height: ",";\n      width: ",";\n      border-radius: ",";\n      background: ",";\n      animation: ","\n        ease-in-out 1s infinite;\n      animation-delay: ","s;\n      ",";\n    "])),u,u,n.border.radius["50P"],n.color.background.defaultDark,function(r){var n=r.color1,a=r.color2;return o.keyframes(s||(s=e.__makeTemplateObject(["\n  0% { background-color: ","; transform: scale(1); }\n  50% { background-color: ","; transform: scale(1.2); }\n  100% { background-color: ","; transform: scale(1); }\n"],["\n  0% { background-color: ","; transform: scale(1); }\n  50% { background-color: ","; transform: scale(1.2); }\n  100% { background-color: ","; transform: scale(1); }\n"])),n,a,n)}({color1:n.color.background.defaultDark,color2:n.color.background.defaultDarkest}),1/3*a,l)})),u=c.default.div((function(r){r.theme;var n=r.css;return e.__assign({display:"flex",alignItems:"center",justifyContent:"center",columnGap:8},n)}));var d,m=n.forwardRef((function(n,o){var t=n.css,s=n.variant,i=void 0===s?"medium":s,c=n.styleConfig,d=void 0===c?{}:c,m=a.useTheme(),f=d.root,g=d.loaderCont;return r.jsx(u,e.__assign({css:(null==f?void 0:f.css)||t,ref:o,theme:m,className:null==f?void 0:f.className},{children:Array.from({length:3}).map((function(e,n){return r.jsx(l,{variant:i,theme:m,dotId:n,className:null==g?void 0:g.className,css:null==g?void 0:g.css},n)}))}))})),f=n.memo(m);!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(d||(d={})),exports.DottedLoader=f;
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),o=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-style-manager"),a=require("@emotion/css");const n=t.makeStyles(r=>({root:{alignItems:"center",justifyContent:"center",flexDirection:"row",columnGap:8},dot:{borderRadius:r.border.radius[32],backgroundColor:r.color.background.defaultDark}})),i=({dotId:e,variant:i,styleConfig:s})=>{const{root:d=[]}=s||{},c=t.useStyles(r=>{const o=function(r,e){switch(r){case"large":return e.size[3];case"medium":return e.size[2];default:return e.size[1]}}(i,r);return{dot:{width:o,height:o,animation:`${(({color1:r,color2:e})=>a.keyframes`
+  0% { background-color: ${r}; transform: scale(1); }
+  50% { background-color: ${e}; transform: scale(1.2); }
+  100% { background-color: ${r}; transform: scale(1); }
+`)({color1:r.color.background.defaultDark,color2:r.color.background.defaultDarkest})} ease-in-out 1s infinite`,animationDelay:1/3*e+"s"}}},[i,e]);return r.jsx(o.Container,{styleConfig:{root:[n.dot,c.dot,...d]}})},s=e.memo(e.forwardRef(({css:e,variant:t="medium",styleConfig:a},s)=>{const{root:d=[],loaderCont:c}=a||{},l=e?[e]:[];return r.jsx(o.Container,{ref:s,styleConfig:{root:[n.root,...d,...l]},children:Array.from({length:3}).map((e,o)=>r.jsx(i,{dotId:o,variant:t,styleConfig:{root:c}},o))})}));var d;s.displayName="DottedLoader",exports.DottedLoaderSize=void 0,(d=exports.DottedLoaderSize||(exports.DottedLoaderSize={})).SMALL="small",d.MEDIUM="medium",d.LARGE="large",exports.DottedLoader=s;
 //# sourceMappingURL=ct-design-dottedLoader.browser.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-dottedLoader.browser.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/type.ts"],"sourcesContent":[null,null,null],"names":["StyledLoaderDot","styled","default","div","_a","theme","dotId","variant","_b","css","styleCss","size","getLoaderDimension","templateObject_2","__makeTemplateObject","border","radius","color","background","defaultDark","color1","color2","keyframes","templateObject_1","dotAnimationKeyframe","defaultDarkest","StyledLoaderWrapper","__assign","display","alignItems","justifyContent","columnGap","DottedLoaderSize","DottedLoader","forwardRef","forwardedRef","_c","styleConfig","useTheme","root","loaderCont","_jsx","ref","className","children","Array","from","length","map","_","id","jsx","memo"],"mappings":"+NAaaA,EAAkBC,EAAMC,QAACC,KACpC,SAACC,GACC,IAAAC,EAAKD,EAAAC,MACLC,EAAKF,EAAAE,MACLC,EAAOH,EAAAG,QACPC,EAAkBJ,EAAAK,IAAbC,OAAQ,IAAAF,EAAG,CAAE,EAAAA,EAEZG,EA4BM,SAAmBA,EAAqBN,GACtD,OAAQM,GACN,IAAK,QACH,OAAON,EAAMM,KAAK,GACpB,IAAK,SACH,OAAON,EAAMM,KAAK,GACpB,QACE,OAAON,EAAMM,KAAK,GAExB,CArCiBC,CAAmBL,EAASF,GAEzC,OAAOI,EAAAA,IAAGI,IAAAA,EAAAC,EAAAA,qBAAA,CAAA,mBAAA,mBAAA,2BAAA,wBAAA,uBAAA,8DAAA,aAAA,WAAA,CAAA,mBACM,mBACD,2BAC8B,wBACK,uBAI5C,8DAE8B,aACW,aAVnCH,EACDA,EACQN,EAAMU,OAAOC,OAAO,OACvBX,EAAMY,MAAMC,WAAWC,YApBd,SAACf,OAAEgB,EAAMhB,EAAAgB,OAAEC,EAAMjB,EAAAiB,OAA2C,OAAAC,EAASA,UAAAC,IAAAA,EAAAT,EAAAA,qBAAA,CAAA,8BAAA,uDAAA,0DAAA,8BAAA,CAAA,8BACjE,uDACC,0DACC,gCAFRM,EACCC,EACCD,EAH4D,CAqBtEI,CAAqB,CAC9BJ,OAAQf,EAAMY,MAAMC,WAAWC,YAC/BE,OAAQhB,EAAMY,MAAMC,WAAWO,iBAGf,EAAI,EAAKnB,EAC3BI,EAEN,IAGWgB,EAAsBzB,EAAMC,QAACC,KAAI,SAACC,GAAOA,EAAAC,UAAEI,EAAGL,EAAAK,IACzD,OAAAkB,WAAA,CACEC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,UAAW,GACRtB,EAEP,ICrCA,ICCKuB,EDCCC,EAAeC,EAAUA,YAAC,SAAC9B,EAA+C+B,GAA7C,IAAA1B,EAAGL,EAAAK,IAAED,EAAkBJ,EAAAG,QAAlBA,OAAU,IAAAC,EAAA,SAAQA,EAAE4B,EAAgBhC,EAAAiC,YAAhBA,OAAW,IAAAD,EAAG,CAAE,EAAAA,EACpE/B,EAAQiC,EAAAA,WACNC,EAAqBF,EAAWE,KAA1BC,EAAeH,EAAWG,WAExC,OACEC,MAACf,EAAmBC,WAAA,CAAClB,KAAK8B,aAAI,EAAJA,EAAM9B,MAAOA,EAAKiC,IAAKP,EAAc9B,MAAOA,EAAOsC,UAAWJ,aAAA,EAAAA,EAAMI,WAAS,CAAAC,SACpGC,MAAMC,KAAK,CAAEC,OARF,IAQuBC,KAAI,SAACC,EAAGC,GACzC,OACET,EAACU,IAAAnD,EACC,CAAAO,QAASA,EACTF,MAAOA,EACPC,MAAO4C,EAEPP,UAAWH,eAAAA,EAAYG,UACvBlC,IAAK+B,aAAU,EAAVA,EAAY/B,KAFZyC,QAQjB,IAEeE,EAAAA,EAAAA,KAAKnB,ICvBpB,SAAKD,GACHA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAKA,IAAAA,EAIJ,CAAA"}
+{"version":3,"file":"ct-design-dottedLoader.browser.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["staticLoaderStyles","makeStyles","theme","root","alignItems","justifyContent","flexDirection","columnGap","dot","borderRadius","border","radius","backgroundColor","color","background","defaultDark","LoaderDot","dotId","variant","styleConfig","dotStyles","dynamicStyles","useStyles","size","getLoaderDimension","width","height","animation","color1","color2","keyframes","dotAnimationKeyframe","defaultDarkest","animationDelay","_jsx","jsx","Container","DottedLoader","memo","forwardRef","css","forwardedRef","rootStyles","loaderCont","legacyCssStyles","ref","children","Array","from","length","map","_","id","DottedLoaderSize","displayName"],"mappings":"yLA6BO,MAWDA,EAAqBC,EAAAA,WAAYC,IAAW,CAChDC,KAAM,CACJC,WAAY,SACZC,eAAgB,SAChBC,cAAe,MACfC,UAAW,GAEbC,IAAK,CACHC,aAAcP,EAAMQ,OAAOC,OAAO,IAClCC,gBAAiBV,EAAMW,MAAMC,WAAWC,gBCjCtCC,EAAY,EAAGC,QAAOC,UAASC,kBACnC,MAAQhB,KAAMiB,EAAY,IAAOD,GAAe,CAAA,EAE1CE,EAAgBC,YACnBpB,IACC,MAAMqB,EDTI,SAAmBA,EAAiCrB,GAClE,OAAQqB,GACN,IAAK,QACH,OAAOrB,EAAMqB,KAAK,GACpB,IAAK,SACH,OAAOrB,EAAMqB,KAAK,GACpB,QACE,OAAOrB,EAAMqB,KAAK,GAExB,CCAmBC,CAAmBN,EAAShB,GAMzC,MAAO,CACLM,IAAK,CACHiB,MAAOF,EACPG,OAAQH,EACRI,UAAW,GDFe,GAAGC,SAAQC,YAAiDC,EAASA,SAAA;2BAC9EF;4BACCC;6BACCD;ECVDG,CAAqB,CACzCH,OAAQ1B,EAAMW,MAAMC,WAAWC,YAC/Bc,OAAQ3B,EAAMW,MAAMC,WAAWkB,2CAQ7BC,eAAoB,EAAI,EAAKhB,EAAb,OAItB,CAACC,EAASD,IAGZ,OACEiB,EAAAC,IAACC,YAAS,CACRjB,YAAa,CACXhB,KAAM,CAACH,EAAmBQ,IAAKa,EAAcb,OAAQY,OAevDiB,EAAeC,EAAAA,KACnBC,EAAUA,WAAmC,EAAGC,MAAKtB,UAAU,SAAUC,eAAesB,KACtF,MAAQtC,KAAMuC,EAAa,GAAEC,WAAEA,GAAexB,GAAe,GACvDyB,EAA4BJ,EAAM,CAACA,GAAiB,GAE1D,OACEN,MAACE,EAASA,UAAA,CACRS,IAAKJ,EACLtB,YAAa,CACXhB,KAAM,CAACH,EAAmBG,QAASuC,KAAeE,IAGnDE,SAAAC,MAAMC,KAAK,CAAEC,OA5DJ,IA4DyBC,IAAI,CAACC,EAAGC,IACzClB,EAAAA,IAAClB,GAAmBC,MAAOmC,EAAIlC,QAASA,EAASC,YAAa,CAAEhB,KAAMwC,IAAtDS,SCtE1B,IAAYC,ED6EZhB,EAAaiB,YAAc,eC7EfD,QAIXA,sBAAA,GAJWA,EAAAA,QAAgBA,mBAAhBA,yBAIX,CAAA,IAHC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA"}

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

@@ -1,2 +1,6 @@
-import{__makeTemplateObject as r,__assign as n}from"tslib";import{jsx as o}from"react/jsx-runtime";import{forwardRef as a,memo as e}from"react";import{useTheme as t}from"@cleartrip/ct-design-theme";import i,{css as s,keyframes as c}from"styled-components";var l,d,u=i.div((function(n){var o=n.theme,a=n.dotId,e=n.variant,t=n.css,i=void 0===t?{}:t,u=function(r,n){switch(r){case"large":return n.size[3];case"medium":return n.size[2];default:return n.size[1]}}(e,o);return s(d||(d=r(["\n      height: ",";\n      width: ",";\n      border-radius: ",";\n      background: ",";\n      animation: ","\n        ease-in-out 1s infinite;\n      animation-delay: ","s;\n      ",";\n    "],["\n      height: ",";\n      width: ",";\n      border-radius: ",";\n      background: ",";\n      animation: ","\n        ease-in-out 1s infinite;\n      animation-delay: ","s;\n      ",";\n    "])),u,u,o.border.radius["50P"],o.color.background.defaultDark,function(n){var o=n.color1,a=n.color2;return c(l||(l=r(["\n  0% { background-color: ","; transform: scale(1); }\n  50% { background-color: ","; transform: scale(1.2); }\n  100% { background-color: ","; transform: scale(1); }\n"],["\n  0% { background-color: ","; transform: scale(1); }\n  50% { background-color: ","; transform: scale(1.2); }\n  100% { background-color: ","; transform: scale(1); }\n"])),o,a,o)}({color1:o.color.background.defaultDark,color2:o.color.background.defaultDarkest}),1/3*a,i)})),m=i.div((function(r){r.theme;var o=r.css;return n({display:"flex",alignItems:"center",justifyContent:"center",columnGap:8},o)}));var f,g=a((function(r,a){var e=r.css,i=r.variant,s=void 0===i?"medium":i,c=r.styleConfig,l=void 0===c?{}:c,d=t(),f=l.root,g=l.loaderCont;return o(m,n({css:(null==f?void 0:f.css)||e,ref:a,theme:d,className:null==f?void 0:f.className},{children:Array.from({length:3}).map((function(r,n){return o(u,{variant:s,theme:d,dotId:n,className:null==g?void 0:g.className,css:null==g?void 0:g.css},n)}))}))})),v=e(g);!function(r){r.SMALL="small",r.MEDIUM="medium",r.LARGE="large"}(f||(f={}));export{v as DottedLoader};
+import{jsx as o}from"react/jsx-runtime";import{memo as r,forwardRef as t}from"react";import{Container as e}from"@cleartrip/ct-design-container";import{makeStyles as n,useStyles as a}from"@cleartrip/ct-design-style-manager";import{keyframes as i}from"@emotion/css";const c=n(o=>({root:{alignItems:"center",justifyContent:"center",flexDirection:"row",columnGap:8},dot:{borderRadius:o.border.radius[32],backgroundColor:o.color.background.defaultDark}})),s=({dotId:r,variant:t,styleConfig:n})=>{const{root:s=[]}=n||{},l=a(o=>{const e=function(o,r){switch(o){case"large":return r.size[3];case"medium":return r.size[2];default:return r.size[1]}}(t,o);return{dot:{width:e,height:e,animation:`${(({color1:o,color2:r})=>i`
+  0% { background-color: ${o}; transform: scale(1); }
+  50% { background-color: ${r}; transform: scale(1.2); }
+  100% { background-color: ${o}; transform: scale(1); }
+`)({color1:o.color.background.defaultDark,color2:o.color.background.defaultDarkest})} ease-in-out 1s infinite`,animationDelay:1/3*r+"s"}}},[t,r]);return o(e,{styleConfig:{root:[c.dot,l.dot,...s]}})},l=r(t(({css:r,variant:t="medium",styleConfig:n},a)=>{const{root:i=[],loaderCont:l}=n||{},d=r?[r]:[];return o(e,{ref:a,styleConfig:{root:[c.root,...i,...d]},children:Array.from({length:3}).map((r,e)=>o(s,{dotId:e,variant:t,styleConfig:{root:l}},e))})}));var d;l.displayName="DottedLoader",function(o){o.SMALL="small",o.MEDIUM="medium",o.LARGE="large"}(d||(d={}));export{l as DottedLoader,d as DottedLoaderSize};
 //# sourceMappingURL=ct-design-dottedLoader.browser.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-dottedLoader.browser.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/type.ts"],"sourcesContent":[null,null,null],"names":["StyledLoaderDot","styled","div","_a","theme","dotId","variant","_b","css","styleCss","size","getLoaderDimension","templateObject_2","__makeTemplateObject","border","radius","color","background","defaultDark","color1","color2","keyframes","templateObject_1","dotAnimationKeyframe","defaultDarkest","StyledLoaderWrapper","__assign","display","alignItems","justifyContent","columnGap","DottedLoaderSize","DottedLoader","forwardRef","forwardedRef","_c","styleConfig","useTheme","root","loaderCont","_jsx","ref","className","children","Array","from","length","map","_","id","DottedLoader$1","memo"],"mappings":"gQAMA,QAOaA,EAAkBC,EAAOC,KACpC,SAACC,GACC,IAAAC,EAAKD,EAAAC,MACLC,EAAKF,EAAAE,MACLC,EAAOH,EAAAG,QACPC,EAAkBJ,EAAAK,IAAbC,OAAQ,IAAAF,EAAG,CAAE,EAAAA,EAEZG,EA4BM,SAAmBA,EAAqBN,GACtD,OAAQM,GACN,IAAK,QACH,OAAON,EAAMM,KAAK,GACpB,IAAK,SACH,OAAON,EAAMM,KAAK,GACpB,QACE,OAAON,EAAMM,KAAK,GAExB,CArCiBC,CAAmBL,EAASF,GAEzC,OAAOI,EAAGI,IAAAA,EAAAC,EAAA,CAAA,mBAAA,mBAAA,2BAAA,wBAAA,uBAAA,8DAAA,aAAA,WAAA,CAAA,mBACM,mBACD,2BAC8B,wBACK,uBAI5C,8DAE8B,aACW,aAVnCH,EACDA,EACQN,EAAMU,OAAOC,OAAO,OACvBX,EAAMY,MAAMC,WAAWC,YApBd,SAACf,OAAEgB,EAAMhB,EAAAgB,OAAEC,EAAMjB,EAAAiB,OAA2C,OAAAC,EAASC,IAAAA,EAAAT,EAAA,CAAA,8BAAA,uDAAA,0DAAA,8BAAA,CAAA,8BACjE,uDACC,0DACC,gCAFRM,EACCC,EACCD,EAH4D,CAqBtEI,CAAqB,CAC9BJ,OAAQf,EAAMY,MAAMC,WAAWC,YAC/BE,OAAQhB,EAAMY,MAAMC,WAAWO,iBAGf,EAAI,EAAKnB,EAC3BI,EAEN,IAGWgB,EAAsBxB,EAAOC,KAAI,SAACC,GAAOA,EAAAC,UAAEI,EAAGL,EAAAK,IACzD,OAAAkB,EAAA,CACEC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,UAAW,GACRtB,EAEP,ICrCA,ICCKuB,EDCCC,EAAeC,GAAW,SAAC9B,EAA+C+B,GAA7C,IAAA1B,EAAGL,EAAAK,IAAED,EAAkBJ,EAAAG,QAAlBA,OAAU,IAAAC,EAAA,SAAQA,EAAE4B,EAAgBhC,EAAAiC,YAAhBA,OAAW,IAAAD,EAAG,CAAE,EAAAA,EACpE/B,EAAQiC,IACNC,EAAqBF,EAAWE,KAA1BC,EAAeH,EAAWG,WAExC,OACEC,EAACf,EAAmBC,EAAA,CAAClB,KAAK8B,aAAI,EAAJA,EAAM9B,MAAOA,EAAKiC,IAAKP,EAAc9B,MAAOA,EAAOsC,UAAWJ,aAAA,EAAAA,EAAMI,WAAS,CAAAC,SACpGC,MAAMC,KAAK,CAAEC,OARF,IAQuBC,KAAI,SAACC,EAAGC,GACzC,OACET,EAACxC,EACC,CAAAM,QAASA,EACTF,MAAOA,EACPC,MAAO4C,EAEPP,UAAWH,eAAAA,EAAYG,UACvBlC,IAAK+B,aAAU,EAAVA,EAAY/B,KAFZyC,QAQjB,IAEeC,EAAAC,EAAKnB,ICvBpB,SAAKD,GACHA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAKA,IAAAA,EAIJ,CAAA"}
+{"version":3,"file":"ct-design-dottedLoader.browser.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["staticLoaderStyles","makeStyles","theme","root","alignItems","justifyContent","flexDirection","columnGap","dot","borderRadius","border","radius","backgroundColor","color","background","defaultDark","LoaderDot","dotId","variant","styleConfig","dotStyles","dynamicStyles","useStyles","size","getLoaderDimension","width","height","animation","color1","color2","keyframes","dotAnimationKeyframe","defaultDarkest","animationDelay","_jsx","Container","DottedLoader","memo","forwardRef","css","forwardedRef","rootStyles","loaderCont","legacyCssStyles","ref","children","Array","from","length","map","_","id","DottedLoaderSize","displayName"],"mappings":"wQA6BO,MAWDA,EAAqBC,EAAYC,IAAW,CAChDC,KAAM,CACJC,WAAY,SACZC,eAAgB,SAChBC,cAAe,MACfC,UAAW,GAEbC,IAAK,CACHC,aAAcP,EAAMQ,OAAOC,OAAO,IAClCC,gBAAiBV,EAAMW,MAAMC,WAAWC,gBCjCtCC,EAAY,EAAGC,QAAOC,UAASC,kBACnC,MAAQhB,KAAMiB,EAAY,IAAOD,GAAe,CAAA,EAE1CE,EAAgBC,EACnBpB,IACC,MAAMqB,EDTI,SAAmBA,EAAiCrB,GAClE,OAAQqB,GACN,IAAK,QACH,OAAOrB,EAAMqB,KAAK,GACpB,IAAK,SACH,OAAOrB,EAAMqB,KAAK,GACpB,QACE,OAAOrB,EAAMqB,KAAK,GAExB,CCAmBC,CAAmBN,EAAShB,GAMzC,MAAO,CACLM,IAAK,CACHiB,MAAOF,EACPG,OAAQH,EACRI,UAAW,GDFe,GAAGC,SAAQC,YAAiDC,CAAS;2BAC9EF;4BACCC;6BACCD;ECVDG,CAAqB,CACzCH,OAAQ1B,EAAMW,MAAMC,WAAWC,YAC/Bc,OAAQ3B,EAAMW,MAAMC,WAAWkB,2CAQ7BC,eAAoB,EAAI,EAAKhB,EAAb,OAItB,CAACC,EAASD,IAGZ,OACEiB,EAACC,EAAS,CACRhB,YAAa,CACXhB,KAAM,CAACH,EAAmBQ,IAAKa,EAAcb,OAAQY,OAevDgB,EAAeC,EACnBC,EAA6C,EAAGC,MAAKrB,UAAU,SAAUC,eAAeqB,KACtF,MAAQrC,KAAMsC,EAAa,GAAEC,WAAEA,GAAevB,GAAe,GACvDwB,EAA4BJ,EAAM,CAACA,GAAiB,GAE1D,OACEL,EAACC,EAAS,CACRS,IAAKJ,EACLrB,YAAa,CACXhB,KAAM,CAACH,EAAmBG,QAASsC,KAAeE,IAGnDE,SAAAC,MAAMC,KAAK,CAAEC,OA5DJ,IA4DyBC,IAAI,CAACC,EAAGC,IACzCjB,EAAClB,GAAmBC,MAAOkC,EAAIjC,QAASA,EAASC,YAAa,CAAEhB,KAAMuC,IAAtDS,aCtEdC,ED6EZhB,EAAaiB,YAAc,eC7E3B,SAAYD,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}

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

@@ -1,31 +1,11 @@
 'use strict';
 
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ctDesignTheme = require('@cleartrip/ct-design-theme');
-var styled = require('styled-components');
+var ctDesignContainer = require('@cleartrip/ct-design-container');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var css = require('@emotion/css');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var dotAnimationKeyframe = function (_a) {
-    var color1 = _a.color1, color2 = _a.color2;
-    return styled.keyframes(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"], ["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"])), color1, color2, color1);
-};
-var StyledLoaderDot = styled__default.default.div(function (_a) {
-    var theme = _a.theme, dotId = _a.dotId, variant = _a.variant, _b = _a.css, styleCss = _b === void 0 ? {} : _b;
-    var size = getLoaderDimension(variant, theme);
-    return styled.css(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "], ["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "])), size, size, theme.border.radius['50P'], theme.color.background.defaultDark, dotAnimationKeyframe({
-        color1: theme.color.background.defaultDark,
-        color2: theme.color.background.defaultDarkest,
-    }), (1 / 3) * dotId, styleCss);
-});
-var StyledLoaderWrapper = styled__default.default.div(function (_a) {
-    _a.theme; var css = _a.css;
-    return tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', columnGap: 8 }, css);
-});
 function getLoaderDimension(size, theme) {
     switch (size) {
         case 'large':
@@ -36,25 +16,61 @@ function getLoaderDimension(size, theme) {
             return theme.size[1];
     }
 }
-var templateObject_1, templateObject_2;
+const dotAnimationKeyframe = ({ color1, color2 }) => css.keyframes `
+  0% { background-color: ${color1}; transform: scale(1); }
+  50% { background-color: ${color2}; transform: scale(1.2); }
+  100% { background-color: ${color1}; transform: scale(1); }
+`;
+const staticLoaderStyles = ctDesignStyleManager.makeStyles((theme) => ({
+    root: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        columnGap: 8,
+    },
+    dot: {
+        borderRadius: theme.border.radius[32],
+        backgroundColor: theme.color.background.defaultDark,
+    },
+}));
 
-var DOT_COUNT = 3;
-var DottedLoader = react.forwardRef(function (_a, forwardedRef) {
-    var css = _a.css, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.styleConfig, styleConfig = _c === void 0 ? {} : _c;
-    var theme = ctDesignTheme.useTheme();
-    var root = styleConfig.root, loaderCont = styleConfig.loaderCont;
-    return (jsxRuntime.jsx(StyledLoaderWrapper, tslib.__assign({ css: (root === null || root === void 0 ? void 0 : root.css) || css, ref: forwardedRef, theme: theme, className: root === null || root === void 0 ? void 0 : root.className }, { children: Array.from({ length: DOT_COUNT }).map(function (_, id) {
-            return (jsxRuntime.jsx(StyledLoaderDot, { variant: variant, theme: theme, dotId: id, className: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.className, css: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.css }, id));
-        }) })));
-});
-var DottedLoader$1 = react.memo(DottedLoader);
+const DOT_COUNT = 3;
+const LoaderDot = ({ dotId, variant, styleConfig }) => {
+    const { root: dotStyles = [] } = styleConfig || {};
+    const dynamicStyles = ctDesignStyleManager.useStyles((theme) => {
+        const size = getLoaderDimension(variant, theme);
+        const animationName = dotAnimationKeyframe({
+            color1: theme.color.background.defaultDark,
+            color2: theme.color.background.defaultDarkest,
+        });
+        return {
+            dot: {
+                width: size,
+                height: size,
+                animation: `${animationName} ease-in-out 1s infinite`,
+                animationDelay: `${(1 / 3) * dotId}s`,
+            },
+        };
+    }, [variant, dotId]);
+    return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+            root: [staticLoaderStyles.dot, dynamicStyles.dot, ...dotStyles],
+        } }));
+};
+const DottedLoader = react.memo(react.forwardRef(({ css, variant = 'medium', styleConfig }, forwardedRef) => {
+    const { root: rootStyles = [], loaderCont } = styleConfig || {};
+    const legacyCssStyles = css ? [css] : [];
+    return (jsxRuntime.jsx(ctDesignContainer.Container, { ref: forwardedRef, styleConfig: {
+            root: [staticLoaderStyles.root, ...rootStyles, ...legacyCssStyles],
+        }, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsxRuntime.jsx(LoaderDot, { dotId: id, variant: variant, styleConfig: { root: loaderCont } }, id))) }));
+}));
+DottedLoader.displayName = 'DottedLoader';
 
-var DottedLoaderSize;
+exports.DottedLoaderSize = void 0;
 (function (DottedLoaderSize) {
     DottedLoaderSize["SMALL"] = "small";
     DottedLoaderSize["MEDIUM"] = "medium";
     DottedLoaderSize["LARGE"] = "large";
-})(DottedLoaderSize || (DottedLoaderSize = {}));
+})(exports.DottedLoaderSize || (exports.DottedLoaderSize = {}));
 
-exports.DottedLoader = DottedLoader$1;
+exports.DottedLoader = DottedLoader;
 //# sourceMappingURL=ct-design-dottedLoader.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-dottedLoader.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/type.ts"],"sourcesContent":[null,null,null],"names":["keyframes","__makeTemplateObject","styled","css","__assign","forwardRef","useTheme","_jsx","memo"],"mappings":"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"}
+{"version":3,"file":"ct-design-dottedLoader.cjs.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["keyframes","makeStyles","useStyles","_jsx","Container","memo","forwardRef","DottedLoaderSize"],"mappings":"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"}

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

@@ -1,25 +1,9 @@
-import { __makeTemplateObject, __assign } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, memo } from 'react';
-import { useTheme } from '@cleartrip/ct-design-theme';
-import styled, { css, keyframes } from 'styled-components';
+import { memo, forwardRef } from 'react';
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { keyframes } from '@emotion/css';
 
-var dotAnimationKeyframe = function (_a) {
-    var color1 = _a.color1, color2 = _a.color2;
-    return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"], ["\n  0% { background-color: ", "; transform: scale(1); }\n  50% { background-color: ", "; transform: scale(1.2); }\n  100% { background-color: ", "; transform: scale(1); }\n"])), color1, color2, color1);
-};
-var StyledLoaderDot = styled.div(function (_a) {
-    var theme = _a.theme, dotId = _a.dotId, variant = _a.variant, _b = _a.css, styleCss = _b === void 0 ? {} : _b;
-    var size = getLoaderDimension(variant, theme);
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "], ["\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      animation: ", "\n        ease-in-out 1s infinite;\n      animation-delay: ", "s;\n      ", ";\n    "])), size, size, theme.border.radius['50P'], theme.color.background.defaultDark, dotAnimationKeyframe({
-        color1: theme.color.background.defaultDark,
-        color2: theme.color.background.defaultDarkest,
-    }), (1 / 3) * dotId, styleCss);
-});
-var StyledLoaderWrapper = styled.div(function (_a) {
-    _a.theme; var css = _a.css;
-    return __assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', columnGap: 8 }, css);
-});
 function getLoaderDimension(size, theme) {
     switch (size) {
         case 'large':
@@ -30,18 +14,54 @@ function getLoaderDimension(size, theme) {
             return theme.size[1];
     }
 }
-var templateObject_1, templateObject_2;
+const dotAnimationKeyframe = ({ color1, color2 }) => keyframes `
+  0% { background-color: ${color1}; transform: scale(1); }
+  50% { background-color: ${color2}; transform: scale(1.2); }
+  100% { background-color: ${color1}; transform: scale(1); }
+`;
+const staticLoaderStyles = makeStyles((theme) => ({
+    root: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        columnGap: 8,
+    },
+    dot: {
+        borderRadius: theme.border.radius[32],
+        backgroundColor: theme.color.background.defaultDark,
+    },
+}));
 
-var DOT_COUNT = 3;
-var DottedLoader = forwardRef(function (_a, forwardedRef) {
-    var css = _a.css, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.styleConfig, styleConfig = _c === void 0 ? {} : _c;
-    var theme = useTheme();
-    var root = styleConfig.root, loaderCont = styleConfig.loaderCont;
-    return (jsx(StyledLoaderWrapper, __assign({ css: (root === null || root === void 0 ? void 0 : root.css) || css, ref: forwardedRef, theme: theme, className: root === null || root === void 0 ? void 0 : root.className }, { children: Array.from({ length: DOT_COUNT }).map(function (_, id) {
-            return (jsx(StyledLoaderDot, { variant: variant, theme: theme, dotId: id, className: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.className, css: loaderCont === null || loaderCont === void 0 ? void 0 : loaderCont.css }, id));
-        }) })));
-});
-var DottedLoader$1 = memo(DottedLoader);
+const DOT_COUNT = 3;
+const LoaderDot = ({ dotId, variant, styleConfig }) => {
+    const { root: dotStyles = [] } = styleConfig || {};
+    const dynamicStyles = useStyles((theme) => {
+        const size = getLoaderDimension(variant, theme);
+        const animationName = dotAnimationKeyframe({
+            color1: theme.color.background.defaultDark,
+            color2: theme.color.background.defaultDarkest,
+        });
+        return {
+            dot: {
+                width: size,
+                height: size,
+                animation: `${animationName} ease-in-out 1s infinite`,
+                animationDelay: `${(1 / 3) * dotId}s`,
+            },
+        };
+    }, [variant, dotId]);
+    return (jsx(Container, { styleConfig: {
+            root: [staticLoaderStyles.dot, dynamicStyles.dot, ...dotStyles],
+        } }));
+};
+const DottedLoader = memo(forwardRef(({ css, variant = 'medium', styleConfig }, forwardedRef) => {
+    const { root: rootStyles = [], loaderCont } = styleConfig || {};
+    const legacyCssStyles = css ? [css] : [];
+    return (jsx(Container, { ref: forwardedRef, styleConfig: {
+            root: [staticLoaderStyles.root, ...rootStyles, ...legacyCssStyles],
+        }, children: Array.from({ length: DOT_COUNT }).map((_, id) => (jsx(LoaderDot, { dotId: id, variant: variant, styleConfig: { root: loaderCont } }, id))) }));
+}));
+DottedLoader.displayName = 'DottedLoader';
 
 var DottedLoaderSize;
 (function (DottedLoaderSize) {
@@ -50,5 +70,5 @@ var DottedLoaderSize;
     DottedLoaderSize["LARGE"] = "large";
 })(DottedLoaderSize || (DottedLoaderSize = {}));
 
-export { DottedLoader$1 as DottedLoader };
+export { DottedLoader, DottedLoaderSize };
 //# sourceMappingURL=ct-design-dottedLoader.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-dottedLoader.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/type.ts"],"sourcesContent":[null,null,null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ct-design-dottedLoader.esm.js","sources":["../packages/components/DottedLoader/src/style.ts","../packages/components/DottedLoader/src/DottedLoader.tsx","../packages/components/DottedLoader/src/constants.ts"],"sourcesContent":[null,null,null],"names":["_jsx"],"mappings":"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"}