@cleartrip/ct-design-shimmer 5.10.0 → 5.11.0-SNAPSHOT-native-main.0

package/dist/Shimmer.d.ts

@@ -1,4 +1,4 @@
 import { ShimmerProps } from './type';
-declare const Shimmer: import("react").MemoExoticComponent<({ width, height, shape, borderRadius, styleConfig }: ShimmerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Shimmer: import("react").MemoExoticComponent<({ width, height, shape, borderRadius, styleConfig, variant }: ShimmerProps) => import("react/jsx-runtime").JSX.Element>;
 export default Shimmer;
 //# sourceMappingURL=Shimmer.d.ts.map

package/dist/Shimmer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../packages/components/Shimmer/src/Shimmer.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAqCtC,QAAA,MAAM,OAAO,4FAA2E,YAAY,6CAuBlG,CAAC;AAIH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../packages/components/Shimmer/src/Shimmer.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAwBtC,QAAA,MAAM,OAAO,qGAC8E,YAAY,6CA8BtG,CAAC;AAIF,eAAe,OAAO,CAAC"}

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

@@ -1,5 +1,5 @@
 "use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@cleartrip/ct-design-container"),t=require("@cleartrip/ct-design-style-manager"),n=require("@emotion/css");const o=n.keyframes`
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
-`,a=t.makeStyles(e=>({shimmerWrapper:{backgroundColor:e.color.shimmer.disabledLight||"#efefef",overflow:"hidden",width:"100%",height:"100%"}}));function s(e,r,i){return"circle"===e?"number"==typeof r?r/2:300:i}const c=r.memo(({width:r,height:n,shape:c="rect",borderRadius:d=8,styleConfig:u})=>{const l=t.useStyles(()=>({container:{width:null!=r?r:"100%",height:null!=n?n:"100%",borderRadius:s(c,n,d),background:"linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)",minWidth:400,backgroundSize:"150% 100%",animation:`${o} 1.5s infinite linear`}}),[r,n,c,d]);return e.jsx(i.Container,{styleConfig:{root:[a.shimmerWrapper,l.container,...(null==u?void 0:u.root)||[]]}})});c.displayName="Shimmer",exports.Shimmer=c;
+`,a="linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)",s=n.css({backgroundImage:a,backgroundSize:"150% 100%",animation:`${o} 1.5s infinite linear`}),c=n.css({backgroundImage:a,backgroundSize:"100% 100%"}),d=t.makeStyles(e=>({shimmerWrapper:{backgroundColor:e.color.shimmer.disabledLight||"#efefef",overflow:"hidden",width:"100%",height:"100%"}}));function m(e,r,i){return"circle"===e?"number"==typeof r?r/2:300:i}const u=r.memo(({width:r,height:n,shape:o="rect",borderRadius:a=8,styleConfig:u,variant:l="animated"})=>{const g=t.useStyles(()=>({container:{width:null!=r?r:"100%",height:null!=n?n:"100%",maxWidth:"100%",alignSelf:"stretch",boxSizing:"border-box",borderRadius:m(o,n,a)}}),[r,n,o,a]),h="animated"===l?s:c;return e.jsx(i.Container,{styleConfig:{root:[d.shimmerWrapper,g.container,h,...(null==u?void 0:u.root)||[]]}})});u.displayName="Shimmer",exports.Shimmer=u;
 //# sourceMappingURL=ct-design-shimmer.browser.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-shimmer.browser.cjs.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["shimmerKeyframes","keyframes","shimmerWrapperStyles","makeStyles","theme","shimmerWrapper","backgroundColor","color","shimmer","disabledLight","overflow","width","height","resolveBorderRadius","shape","borderRadius","Shimmer","memo","styleConfig","dynamicStyles","useStyles","container","background","minWidth","backgroundSize","animation","_jsx","jsx","Container","root","displayName"],"mappings":"yLASO,MAQMA,EAAmBC,EAASA,SAAA;;;EAiB5BC,EAAuBC,EAAAA,WAAYC,IAAW,CACzDC,eAAgB,CACdC,gBAAiBF,EAAMG,MAAMC,QAAQC,eAAiB,UACtDC,SAAU,SACVC,MAAO,OACPC,OAAQ,WCtBZ,SAASC,EACPC,EACAF,EACAG,GAEA,MAAc,WAAVD,EACuB,iBAAXF,EAAsBA,EAAS,EDdb,ICgB3BG,CACT,CAiBM,MAAAC,EAAUC,EAAIA,KAAC,EAAGN,QAAOC,SAAQE,QAAQ,OAAQC,eAAe,EAAGG,kBACvE,MAAMC,EAAgBC,EAAAA,UACpB,KAAO,CACLC,UAAW,CACTV,MAAOA,QAAAA,EAAS,OAChBC,OAAQA,QAAAA,EAAU,OAClBG,aAAcF,EAAoBC,EAAOF,EAAQG,GACjDO,WDxBuB,mECyBvBC,SAAU,IACVC,eAAgB,YAChBC,UAAW,GAAGzB,4BAGlB,CAACW,EAAOC,EAAQE,EAAOC,IAGzB,OACEW,EAAAC,IAACC,YAAS,CACRV,YAAa,CACXW,KAAM,CAAC3B,EAAqBG,eAAgBc,EAAcE,cAAeH,aAAA,EAAAA,EAAaW,OAAQ,SAMtGb,EAAQc,YAAc"}
+{"version":3,"file":"ct-design-shimmer.browser.cjs.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["shimmerKeyframes","keyframes","shimmerGradient","shimmerAnimatedClass","css","backgroundImage","backgroundSize","animation","shimmerStaticClass","shimmerWrapperStyles","makeStyles","theme","shimmerWrapper","backgroundColor","color","shimmer","disabledLight","overflow","width","height","resolveBorderRadius","shape","borderRadius","Shimmer","memo","styleConfig","variant","dynamicStyles","useStyles","container","maxWidth","alignSelf","boxSizing","shimmerVisualClass","_jsx","jsx","Container","root","displayName"],"mappings":"yLASO,MAQMA,EAAmBC,EAASA,SAAA;;;EAS5BC,EAAkB,mEAElBC,EAAuBC,EAAAA,IAAI,CACtCC,gBAAiBH,EACjBI,eAAgB,YAChBC,UAAW,GAAGP,2BAGHQ,EAAqBJ,EAAAA,IAAI,CACpCC,gBAAiBH,EACjBI,eAAgB,cASLG,EAAuBC,EAAAA,WAAYC,IAAW,CACzDC,eAAgB,CACdC,gBAAiBF,EAAMG,MAAMC,QAAQC,eAAiB,UACtDC,SAAU,SACVC,MAAO,OACPC,OAAQ,WCtCZ,SAASC,EACPC,EACAF,EACAG,GAEA,MAAc,WAAVD,EACuB,iBAAXF,EAAsBA,EAAS,EDTb,ICW3BG,CACT,CAUM,MAAAC,EAAUC,EAAAA,KACd,EAAGN,QAAOC,SAAQE,QAAQ,OAAQC,eAAe,EAAGG,cAAaC,UAAU,eACzE,MAAMC,EAAgBC,EAAAA,UACpB,KAAO,CACLC,UAAW,CACTX,MAAOA,QAAAA,EAAS,OAChBC,OAAQA,QAAAA,EAAU,OAClBW,SAAU,OACVC,UAAW,UACXC,UAAW,aACXV,aAAcF,EAAoBC,EAAOF,EAAQG,MAGrD,CAACJ,EAAOC,EAAQE,EAAOC,IAGnBW,EAAkC,aAAZP,EAAyBvB,EAAuBK,EAE5E,OACE0B,EAAAC,IAACC,YAAS,CACRX,YAAa,CACXY,KAAM,CACJ5B,EAAqBG,eACrBe,EAAcE,UACdI,MACIR,aAAA,EAAAA,EAAaY,OAAQ,SAQrCd,EAAQe,YAAc"}

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

@@ -1,5 +1,5 @@
-import{jsx as r}from"react/jsx-runtime";import{memo as e}from"react";import{Container as i}from"@cleartrip/ct-design-container";import{makeStyles as o,useStyles as t}from"@cleartrip/ct-design-style-manager";import{keyframes as n}from"@emotion/css";const a=n`
+import{jsx as r}from"react/jsx-runtime";import{memo as e}from"react";import{Container as i}from"@cleartrip/ct-design-container";import{makeStyles as o,useStyles as t}from"@cleartrip/ct-design-style-manager";import{keyframes as n,css as a}from"@emotion/css";const m="linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)",d=a({backgroundImage:m,backgroundSize:"150% 100%",animation:`${n`
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
-`,m=o(r=>({shimmerWrapper:{backgroundColor:r.color.shimmer.disabledLight||"#efefef",overflow:"hidden",width:"100%",height:"100%"}}));function c(r,e,i){return"circle"===r?"number"==typeof e?e/2:300:i}const d=e(({width:e,height:o,shape:n="rect",borderRadius:d=8,styleConfig:s})=>{const f=t(()=>({container:{width:null!=e?e:"100%",height:null!=o?o:"100%",borderRadius:c(n,o,d),background:"linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)",minWidth:400,backgroundSize:"150% 100%",animation:`${a} 1.5s infinite linear`}}),[e,o,n,d]);return r(i,{styleConfig:{root:[m.shimmerWrapper,f.container,...(null==s?void 0:s.root)||[]]}})});d.displayName="Shimmer";export{d as Shimmer};
+`} 1.5s infinite linear`}),c=a({backgroundImage:m,backgroundSize:"100% 100%"}),s=o(r=>({shimmerWrapper:{backgroundColor:r.color.shimmer.disabledLight||"#efefef",overflow:"hidden",width:"100%",height:"100%"}}));function g(r,e,i){return"circle"===r?"number"==typeof e?e/2:300:i}const f=e(({width:e,height:o,shape:n="rect",borderRadius:a=8,styleConfig:m,variant:f="animated"})=>{const l=t(()=>({container:{width:null!=e?e:"100%",height:null!=o?o:"100%",maxWidth:"100%",alignSelf:"stretch",boxSizing:"border-box",borderRadius:g(n,o,a)}}),[e,o,n,a]),h="animated"===f?d:c;return r(i,{styleConfig:{root:[s.shimmerWrapper,l.container,h,...(null==m?void 0:m.root)||[]]}})});f.displayName="Shimmer";export{f as Shimmer};
 //# sourceMappingURL=ct-design-shimmer.browser.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-shimmer.browser.esm.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["shimmerKeyframes","keyframes","shimmerWrapperStyles","makeStyles","theme","shimmerWrapper","backgroundColor","color","shimmer","disabledLight","overflow","width","height","resolveBorderRadius","shape","borderRadius","Shimmer","memo","styleConfig","dynamicStyles","useStyles","container","background","minWidth","backgroundSize","animation","_jsx","Container","root","displayName"],"mappings":"wPASO,MAQMA,EAAmBC,CAAS;;;EAiB5BC,EAAuBC,EAAYC,IAAW,CACzDC,eAAgB,CACdC,gBAAiBF,EAAMG,MAAMC,QAAQC,eAAiB,UACtDC,SAAU,SACVC,MAAO,OACPC,OAAQ,WCtBZ,SAASC,EACPC,EACAF,EACAG,GAEA,MAAc,WAAVD,EACuB,iBAAXF,EAAsBA,EAAS,EDdb,ICgB3BG,CACT,CAiBM,MAAAC,EAAUC,EAAK,EAAGN,QAAOC,SAAQE,QAAQ,OAAQC,eAAe,EAAGG,kBACvE,MAAMC,EAAgBC,EACpB,KAAO,CACLC,UAAW,CACTV,MAAOA,QAAAA,EAAS,OAChBC,OAAQA,QAAAA,EAAU,OAClBG,aAAcF,EAAoBC,EAAOF,EAAQG,GACjDO,WDxBuB,mECyBvBC,SAAU,IACVC,eAAgB,YAChBC,UAAW,GAAGzB,4BAGlB,CAACW,EAAOC,EAAQE,EAAOC,IAGzB,OACEW,EAACC,EAAS,CACRT,YAAa,CACXU,KAAM,CAAC1B,EAAqBG,eAAgBc,EAAcE,cAAeH,aAAA,EAAAA,EAAaU,OAAQ,SAMtGZ,EAAQa,YAAc"}
+{"version":3,"file":"ct-design-shimmer.browser.esm.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["shimmerGradient","shimmerAnimatedClass","css","backgroundImage","backgroundSize","animation","keyframes","shimmerStaticClass","shimmerWrapperStyles","makeStyles","theme","shimmerWrapper","backgroundColor","color","shimmer","disabledLight","overflow","width","height","resolveBorderRadius","shape","borderRadius","Shimmer","memo","styleConfig","variant","dynamicStyles","useStyles","container","maxWidth","alignSelf","boxSizing","shimmerVisualClass","_jsx","Container","root","displayName"],"mappings":"iQASO,MAiBMA,EAAkB,mEAElBC,EAAuBC,EAAI,CACtCC,gBAAiBH,EACjBI,eAAgB,YAChBC,UAAW,GAdmBC,CAAS;;;2BAiB5BC,EAAqBL,EAAI,CACpCC,gBAAiBH,EACjBI,eAAgB,cASLI,EAAuBC,EAAYC,IAAW,CACzDC,eAAgB,CACdC,gBAAiBF,EAAMG,MAAMC,QAAQC,eAAiB,UACtDC,SAAU,SACVC,MAAO,OACPC,OAAQ,WCtCZ,SAASC,EACPC,EACAF,EACAG,GAEA,MAAc,WAAVD,EACuB,iBAAXF,EAAsBA,EAAS,EDTb,ICW3BG,CACT,CAUM,MAAAC,EAAUC,EACd,EAAGN,QAAOC,SAAQE,QAAQ,OAAQC,eAAe,EAAGG,cAAaC,UAAU,eACzE,MAAMC,EAAgBC,EACpB,KAAO,CACLC,UAAW,CACTX,MAAOA,QAAAA,EAAS,OAChBC,OAAQA,QAAAA,EAAU,OAClBW,SAAU,OACVC,UAAW,UACXC,UAAW,aACXV,aAAcF,EAAoBC,EAAOF,EAAQG,MAGrD,CAACJ,EAAOC,EAAQE,EAAOC,IAGnBW,EAAkC,aAAZP,EAAyBxB,EAAuBM,EAE5E,OACE0B,EAACC,EAAS,CACRV,YAAa,CACXW,KAAM,CACJ3B,EAAqBG,eACrBe,EAAcE,UACdI,MACIR,aAAA,EAAAA,EAAaW,OAAQ,SAQrCb,EAAQc,YAAc"}

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

@@ -12,6 +12,15 @@ const shimmerKeyframes = css.keyframes `
   100% { background-position: -200% 0; }
 `;
 const shimmerGradient = 'linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)';
+const shimmerAnimatedClass = css.css({
+    backgroundImage: shimmerGradient,
+    backgroundSize: '150% 100%',
+    animation: `${shimmerKeyframes} 1.5s infinite linear`,
+});
+const shimmerStaticClass = css.css({
+    backgroundImage: shimmerGradient,
+    backgroundSize: '100% 100%',
+});
 const shimmerWrapperStyles = ctDesignStyleManager.makeStyles((theme) => ({
     shimmerWrapper: {
         backgroundColor: theme.color.shimmer.disabledLight || '#efefef',
@@ -27,20 +36,25 @@ function resolveBorderRadius(shape, height, borderRadius) {
     }
     return borderRadius;
 }
-const Shimmer = react.memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig }) => {
+const Shimmer = react.memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig, variant = 'animated' }) => {
     const dynamicStyles = ctDesignStyleManager.useStyles(() => ({
         container: {
             width: width !== null && width !== void 0 ? width : '100%',
             height: height !== null && height !== void 0 ? height : '100%',
+            maxWidth: '100%',
+            alignSelf: 'stretch',
+            boxSizing: 'border-box',
             borderRadius: resolveBorderRadius(shape, height, borderRadius),
-            background: shimmerGradient,
-            minWidth: 400,
-            backgroundSize: '150% 100%',
-            animation: `${shimmerKeyframes} 1.5s infinite linear`,
         },
     }), [width, height, shape, borderRadius]);
+    const shimmerVisualClass = (variant === 'animated' ? shimmerAnimatedClass : shimmerStaticClass);
     return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
-            root: [shimmerWrapperStyles.shimmerWrapper, dynamicStyles.container, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || [])],
+            root: [
+                shimmerWrapperStyles.shimmerWrapper,
+                dynamicStyles.container,
+                shimmerVisualClass,
+                ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || []),
+            ],
         } }));
 });
 Shimmer.displayName = 'Shimmer';

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-shimmer.cjs.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["keyframes","makeStyles","memo","useStyles","_jsx","Container"],"mappings":";;;;;;;;AASO,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAQjC,MAAM,gBAAgB,GAAGA,aAAS,CAAA,CAAA;;;CAGxC,CAAC;AAMK,MAAM,eAAe,GAAG,kEAAkE,CAAC;AAQ3F,MAAM,oBAAoB,GAAGC,+BAAU,CAAC,CAAC,KAAK,MAAM;AACzD,IAAA,cAAc,EAAE;QACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,SAAS;AAC/D,QAAA,QAAQ,EAAE,QAAiB;AAC3B,QAAA,KAAK,EAAE,MAAe;AACtB,QAAA,MAAM,EAAE,MAAe;AACxB,KAAA;AACF,CAAA,CAAC,CAAC;;ACxBH,SAAS,mBAAmB,CAC1B,KAAwB,EACxB,MAAmC,EACnC,YAAoB,EAAA;AAEpB,IAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACtB,QAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,oBAAoB,CAAC;KACvE;AACD,IAAA,OAAO,YAAY,CAAC;AACtB,CAAC;AAiBK,MAAA,OAAO,GAAGC,UAAI,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,WAAW,EAAgB,KAAI;AACtG,IAAA,MAAM,aAAa,GAAGC,8BAAS,CAC7B,OAAO;AACL,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,MAAM;AACtB,YAAA,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,MAAM;YACxB,YAAY,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC;AAC9D,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,cAAc,EAAE,WAAW;YAC3B,SAAS,EAAE,CAAG,EAAA,gBAAgB,CAAuB,qBAAA,CAAA;AACtD,SAAA;KACF,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CACrC,CAAC;AAEF,IAAA,QACEC,cAAA,CAACC,2BAAS,EAAA,EACR,WAAW,EAAE;YACX,IAAI,EAAE,CAAC,oBAAoB,CAAC,cAAc,EAAE,aAAa,CAAC,SAAS,EAAE,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC,CAAC;AACnG,SAAA,EAAA,CACD,EACF;AACJ,CAAC,EAAE;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"ct-design-shimmer.cjs.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["keyframes","css","makeStyles","memo","useStyles","_jsx","Container"],"mappings":";;;;;;;;AASO,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAQjC,MAAM,gBAAgB,GAAGA,aAAS,CAAA,CAAA;;;CAGxC,CAAC;AAMK,MAAM,eAAe,GAAG,kEAAkE,CAAC;AAE3F,MAAM,oBAAoB,GAAGC,OAAG,CAAC;AACtC,IAAA,eAAe,EAAE,eAAe;AAChC,IAAA,cAAc,EAAE,WAAW;IAC3B,SAAS,EAAE,CAAG,EAAA,gBAAgB,CAAuB,qBAAA,CAAA;AACtD,CAAA,CAAC,CAAC;AAEI,MAAM,kBAAkB,GAAGA,OAAG,CAAC;AACpC,IAAA,eAAe,EAAE,eAAe;AAChC,IAAA,cAAc,EAAE,WAAW;AAC5B,CAAA,CAAC,CAAC;AAQI,MAAM,oBAAoB,GAAGC,+BAAU,CAAC,CAAC,KAAK,MAAM;AACzD,IAAA,cAAc,EAAE;QACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,SAAS;AAC/D,QAAA,QAAQ,EAAE,QAAiB;AAC3B,QAAA,KAAK,EAAE,MAAe;AACtB,QAAA,MAAM,EAAE,MAAe;AACxB,KAAA;AACF,CAAA,CAAC,CAAC;;ACxCH,SAAS,mBAAmB,CAC1B,KAAwB,EACxB,MAAmC,EACnC,YAAoB,EAAA;AAEpB,IAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACtB,QAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,oBAAoB,CAAC;KACvE;AACD,IAAA,OAAO,YAAY,CAAC;AACtB,CAAC;AAUK,MAAA,OAAO,GAAGC,UAAI,CAClB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAgB,KAAI;AACvG,IAAA,MAAM,aAAa,GAAGC,8BAAS,CAC7B,OAAO;AACL,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,MAAM;AACtB,YAAA,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,MAAM;AACxB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,YAAY;YACvB,YAAY,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC;AAC/D,SAAA;KACF,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,kBAAkB,IAAI,OAAO,KAAK,UAAU,GAAG,oBAAoB,GAAG,kBAAkB,CAAW,CAAC;AAE1G,IAAA,QACEC,cAAA,CAACC,2BAAS,EAAA,EACR,WAAW,EAAE;AACX,YAAA,IAAI,EAAE;AACJ,gBAAA,oBAAoB,CAAC,cAAc;AACnC,gBAAA,aAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC;AAC7B,aAAA;AACF,SAAA,EAAA,CACD,EACF;AACJ,CAAC,EACD;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { Container } from '@cleartrip/ct-design-container';
 import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
-import { keyframes } from '@emotion/css';
+import { keyframes, css } from '@emotion/css';
 
 const MaxBorderRadiusValue = 300;
 const shimmerKeyframes = keyframes `
@@ -10,6 +10,15 @@ const shimmerKeyframes = keyframes `
   100% { background-position: -200% 0; }
 `;
 const shimmerGradient = 'linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)';
+const shimmerAnimatedClass = css({
+    backgroundImage: shimmerGradient,
+    backgroundSize: '150% 100%',
+    animation: `${shimmerKeyframes} 1.5s infinite linear`,
+});
+const shimmerStaticClass = css({
+    backgroundImage: shimmerGradient,
+    backgroundSize: '100% 100%',
+});
 const shimmerWrapperStyles = makeStyles((theme) => ({
     shimmerWrapper: {
         backgroundColor: theme.color.shimmer.disabledLight || '#efefef',
@@ -25,20 +34,25 @@ function resolveBorderRadius(shape, height, borderRadius) {
     }
     return borderRadius;
 }
-const Shimmer = memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig }) => {
+const Shimmer = memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig, variant = 'animated' }) => {
     const dynamicStyles = useStyles(() => ({
         container: {
             width: width !== null && width !== void 0 ? width : '100%',
             height: height !== null && height !== void 0 ? height : '100%',
+            maxWidth: '100%',
+            alignSelf: 'stretch',
+            boxSizing: 'border-box',
             borderRadius: resolveBorderRadius(shape, height, borderRadius),
-            background: shimmerGradient,
-            minWidth: 400,
-            backgroundSize: '150% 100%',
-            animation: `${shimmerKeyframes} 1.5s infinite linear`,
         },
     }), [width, height, shape, borderRadius]);
+    const shimmerVisualClass = (variant === 'animated' ? shimmerAnimatedClass : shimmerStaticClass);
     return (jsx(Container, { styleConfig: {
-            root: [shimmerWrapperStyles.shimmerWrapper, dynamicStyles.container, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || [])],
+            root: [
+                shimmerWrapperStyles.shimmerWrapper,
+                dynamicStyles.container,
+                shimmerVisualClass,
+                ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || []),
+            ],
         } }));
 });
 Shimmer.displayName = 'Shimmer';

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

@@ -1 +1 @@
-{"version":3,"file":"ct-design-shimmer.esm.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["_jsx"],"mappings":";;;;;;AASO,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAQjC,MAAM,gBAAgB,GAAG,SAAS,CAAA,CAAA;;;CAGxC,CAAC;AAMK,MAAM,eAAe,GAAG,kEAAkE,CAAC;AAQ3F,MAAM,oBAAoB,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AACzD,IAAA,cAAc,EAAE;QACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,SAAS;AAC/D,QAAA,QAAQ,EAAE,QAAiB;AAC3B,QAAA,KAAK,EAAE,MAAe;AACtB,QAAA,MAAM,EAAE,MAAe;AACxB,KAAA;AACF,CAAA,CAAC,CAAC;;ACxBH,SAAS,mBAAmB,CAC1B,KAAwB,EACxB,MAAmC,EACnC,YAAoB,EAAA;AAEpB,IAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACtB,QAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,oBAAoB,CAAC;KACvE;AACD,IAAA,OAAO,YAAY,CAAC;AACtB,CAAC;AAiBK,MAAA,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,WAAW,EAAgB,KAAI;AACtG,IAAA,MAAM,aAAa,GAAG,SAAS,CAC7B,OAAO;AACL,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,MAAM;AACtB,YAAA,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,MAAM;YACxB,YAAY,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC;AAC9D,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,cAAc,EAAE,WAAW;YAC3B,SAAS,EAAE,CAAG,EAAA,gBAAgB,CAAuB,qBAAA,CAAA;AACtD,SAAA;KACF,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CACrC,CAAC;AAEF,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,WAAW,EAAE;YACX,IAAI,EAAE,CAAC,oBAAoB,CAAC,cAAc,EAAE,aAAa,CAAC,SAAS,EAAE,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC,CAAC;AACnG,SAAA,EAAA,CACD,EACF;AACJ,CAAC,EAAE;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"ct-design-shimmer.esm.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["_jsx"],"mappings":";;;;;;AASO,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAQjC,MAAM,gBAAgB,GAAG,SAAS,CAAA,CAAA;;;CAGxC,CAAC;AAMK,MAAM,eAAe,GAAG,kEAAkE,CAAC;AAE3F,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACtC,IAAA,eAAe,EAAE,eAAe;AAChC,IAAA,cAAc,EAAE,WAAW;IAC3B,SAAS,EAAE,CAAG,EAAA,gBAAgB,CAAuB,qBAAA,CAAA;AACtD,CAAA,CAAC,CAAC;AAEI,MAAM,kBAAkB,GAAG,GAAG,CAAC;AACpC,IAAA,eAAe,EAAE,eAAe;AAChC,IAAA,cAAc,EAAE,WAAW;AAC5B,CAAA,CAAC,CAAC;AAQI,MAAM,oBAAoB,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AACzD,IAAA,cAAc,EAAE;QACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,SAAS;AAC/D,QAAA,QAAQ,EAAE,QAAiB;AAC3B,QAAA,KAAK,EAAE,MAAe;AACtB,QAAA,MAAM,EAAE,MAAe;AACxB,KAAA;AACF,CAAA,CAAC,CAAC;;ACxCH,SAAS,mBAAmB,CAC1B,KAAwB,EACxB,MAAmC,EACnC,YAAoB,EAAA;AAEpB,IAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACtB,QAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,oBAAoB,CAAC;KACvE;AACD,IAAA,OAAO,YAAY,CAAC;AACtB,CAAC;AAUK,MAAA,OAAO,GAAG,IAAI,CAClB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAgB,KAAI;AACvG,IAAA,MAAM,aAAa,GAAG,SAAS,CAC7B,OAAO;AACL,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,MAAM;AACtB,YAAA,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,MAAM;AACxB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,YAAY;YACvB,YAAY,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC;AAC/D,SAAA;KACF,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,kBAAkB,IAAI,OAAO,KAAK,UAAU,GAAG,oBAAoB,GAAG,kBAAkB,CAAW,CAAC;AAE1G,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,WAAW,EAAE;AACX,YAAA,IAAI,EAAE;AACJ,gBAAA,oBAAoB,CAAC,cAAc;AACnC,gBAAA,aAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC;AAC7B,aAAA;AACF,SAAA,EAAA,CACD,EACF;AACJ,CAAC,EACD;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/dist/ct-design-shimmer.umd.js

@@ -10,6 +10,15 @@
   100% { background-position: -200% 0; }
 `;
   const shimmerGradient = 'linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)';
+  const shimmerAnimatedClass = css.css({
+      backgroundImage: shimmerGradient,
+      backgroundSize: '150% 100%',
+      animation: `${shimmerKeyframes} 1.5s infinite linear`,
+  });
+  const shimmerStaticClass = css.css({
+      backgroundImage: shimmerGradient,
+      backgroundSize: '100% 100%',
+  });
   const shimmerWrapperStyles = ctDesignStyleManager.makeStyles((theme) => ({
       shimmerWrapper: {
           backgroundColor: theme.color.shimmer.disabledLight || '#efefef',
@@ -25,20 +34,25 @@
       }
       return borderRadius;
   }
-  const Shimmer = react.memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig }) => {
+  const Shimmer = react.memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig, variant = 'animated' }) => {
       const dynamicStyles = ctDesignStyleManager.useStyles(() => ({
           container: {
               width: width !== null && width !== void 0 ? width : '100%',
               height: height !== null && height !== void 0 ? height : '100%',
+              maxWidth: '100%',
+              alignSelf: 'stretch',
+              boxSizing: 'border-box',
               borderRadius: resolveBorderRadius(shape, height, borderRadius),
-              background: shimmerGradient,
-              minWidth: 400,
-              backgroundSize: '150% 100%',
-              animation: `${shimmerKeyframes} 1.5s infinite linear`,
           },
       }), [width, height, shape, borderRadius]);
+      const shimmerVisualClass = (variant === 'animated' ? shimmerAnimatedClass : shimmerStaticClass);
       return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
-              root: [shimmerWrapperStyles.shimmerWrapper, dynamicStyles.container, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || [])],
+              root: [
+                  shimmerWrapperStyles.shimmerWrapper,
+                  dynamicStyles.container,
+                  shimmerVisualClass,
+                  ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.root) || []),
+              ],
           } }));
   });
   Shimmer.displayName = 'Shimmer';

package/dist/ct-design-shimmer.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-shimmer.umd.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["keyframes","makeStyles","memo","useStyles","_jsx","Container"],"mappings":";;;;;;EASO,MAAM,oBAAoB,GAAG,GAAG,CAAC;EAQjC,MAAM,gBAAgB,GAAGA,aAAS,CAAA,CAAA;;;CAGxC,CAAC;EAMK,MAAM,eAAe,GAAG,kEAAkE,CAAC;EAQ3F,MAAM,oBAAoB,GAAGC,+BAAU,CAAC,CAAC,KAAK,MAAM;EACzD,IAAA,cAAc,EAAE;UACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,SAAS;EAC/D,QAAA,QAAQ,EAAE,QAAiB;EAC3B,QAAA,KAAK,EAAE,MAAe;EACtB,QAAA,MAAM,EAAE,MAAe;EACxB,KAAA;EACF,CAAA,CAAC,CAAC;;ECxBH,SAAS,mBAAmB,CAC1B,KAAwB,EACxB,MAAmC,EACnC,YAAoB,EAAA;EAEpB,IAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;EACtB,QAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,oBAAoB,CAAC;OACvE;EACD,IAAA,OAAO,YAAY,CAAC;EACtB,CAAC;AAiBK,QAAA,OAAO,GAAGC,UAAI,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,WAAW,EAAgB,KAAI;EACtG,IAAA,MAAM,aAAa,GAAGC,8BAAS,CAC7B,OAAO;EACL,QAAA,SAAS,EAAE;EACT,YAAA,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,MAAM;EACtB,YAAA,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,MAAM;cACxB,YAAY,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC;EAC9D,YAAA,UAAU,EAAE,eAAe;EAC3B,YAAA,QAAQ,EAAE,GAAG;EACb,YAAA,cAAc,EAAE,WAAW;cAC3B,SAAS,EAAE,CAAG,EAAA,gBAAgB,CAAuB,qBAAA,CAAA;EACtD,SAAA;OACF,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CACrC,CAAC;EAEF,IAAA,QACEC,cAAA,CAACC,2BAAS,EAAA,EACR,WAAW,EAAE;cACX,IAAI,EAAE,CAAC,oBAAoB,CAAC,cAAc,EAAE,aAAa,CAAC,SAAS,EAAE,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC,CAAC;EACnG,SAAA,EAAA,CACD,EACF;EACJ,CAAC,EAAE;EAEH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;;;;;"}
+{"version":3,"file":"ct-design-shimmer.umd.js","sources":["../packages/components/Shimmer/src/style.ts","../packages/components/Shimmer/src/Shimmer.tsx"],"sourcesContent":[null,null],"names":["keyframes","css","makeStyles","memo","useStyles","_jsx","Container"],"mappings":";;;;;;EASO,MAAM,oBAAoB,GAAG,GAAG,CAAC;EAQjC,MAAM,gBAAgB,GAAGA,aAAS,CAAA,CAAA;;;CAGxC,CAAC;EAMK,MAAM,eAAe,GAAG,kEAAkE,CAAC;EAE3F,MAAM,oBAAoB,GAAGC,OAAG,CAAC;EACtC,IAAA,eAAe,EAAE,eAAe;EAChC,IAAA,cAAc,EAAE,WAAW;MAC3B,SAAS,EAAE,CAAG,EAAA,gBAAgB,CAAuB,qBAAA,CAAA;EACtD,CAAA,CAAC,CAAC;EAEI,MAAM,kBAAkB,GAAGA,OAAG,CAAC;EACpC,IAAA,eAAe,EAAE,eAAe;EAChC,IAAA,cAAc,EAAE,WAAW;EAC5B,CAAA,CAAC,CAAC;EAQI,MAAM,oBAAoB,GAAGC,+BAAU,CAAC,CAAC,KAAK,MAAM;EACzD,IAAA,cAAc,EAAE;UACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,SAAS;EAC/D,QAAA,QAAQ,EAAE,QAAiB;EAC3B,QAAA,KAAK,EAAE,MAAe;EACtB,QAAA,MAAM,EAAE,MAAe;EACxB,KAAA;EACF,CAAA,CAAC,CAAC;;ECxCH,SAAS,mBAAmB,CAC1B,KAAwB,EACxB,MAAmC,EACnC,YAAoB,EAAA;EAEpB,IAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;EACtB,QAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,oBAAoB,CAAC;OACvE;EACD,IAAA,OAAO,YAAY,CAAC;EACtB,CAAC;AAUK,QAAA,OAAO,GAAGC,UAAI,CAClB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAgB,KAAI;EACvG,IAAA,MAAM,aAAa,GAAGC,8BAAS,CAC7B,OAAO;EACL,QAAA,SAAS,EAAE;EACT,YAAA,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,MAAM;EACtB,YAAA,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,MAAM;EACxB,YAAA,QAAQ,EAAE,MAAM;EAChB,YAAA,SAAS,EAAE,SAAS;EACpB,YAAA,SAAS,EAAE,YAAY;cACvB,YAAY,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC;EAC/D,SAAA;OACF,CAAC,EACF,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CACrC,CAAC;EAEF,IAAA,MAAM,kBAAkB,IAAI,OAAO,KAAK,UAAU,GAAG,oBAAoB,GAAG,kBAAkB,CAAW,CAAC;EAE1G,IAAA,QACEC,cAAA,CAACC,2BAAS,EAAA,EACR,WAAW,EAAE;EACX,YAAA,IAAI,EAAE;EACJ,gBAAA,oBAAoB,CAAC,cAAc;EACnC,gBAAA,aAAa,CAAC,SAAS;kBACvB,kBAAkB;kBAClB,IAAI,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,IAAI,KAAI,EAAE,CAAC;EAC7B,aAAA;EACF,SAAA,EAAA,CACD,EACF;EACJ,CAAC,EACD;EAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;;;;;"}

package/dist/style.d.ts

@@ -1,6 +1,8 @@
 export declare const MaxBorderRadiusValue = 300;
 export declare const shimmerKeyframes: string;
 export declare const shimmerGradient = "linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)";
+export declare const shimmerAnimatedClass: string;
+export declare const shimmerStaticClass: string;
 export declare const shimmerWrapperStyles: {
     shimmerWrapper: {
         backgroundColor: string;

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Shimmer/src/style.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAQxC,eAAO,MAAM,gBAAgB,QAG5B,CAAC;AAMF,eAAO,MAAM,eAAe,qEAAqE,CAAC;AAQlG,eAAO,MAAM,oBAAoB;;;;;;;CAO9B,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Shimmer/src/style.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAQxC,eAAO,MAAM,gBAAgB,QAG5B,CAAC;AAMF,eAAO,MAAM,eAAe,qEAAqE,CAAC;AAElG,eAAO,MAAM,oBAAoB,QAI/B,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAQH,eAAO,MAAM,oBAAoB;;;;;;;CAO9B,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-shimmer",
-  "version": "5.10.0",
+  "version": "5.11.0-SNAPSHOT-native-main.0",
   "description": "Shimmer component",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-shimmer.cjs.js",
@@ -25,12 +25,12 @@
   ],
   "dependencies": {
     "@emotion/css": "11.13.4",
-    "@cleartrip/ct-design-container": "5.11.0",
-    "@cleartrip/ct-design-style-manager": "5.10.0",
-    "@cleartrip/ct-design-theme": "5.10.0"
+    "@cleartrip/ct-design-container": "5.12.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-style-manager": "5.10.1-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-theme": "5.11.0-SNAPSHOT-native-main.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-types": "5.10.0"
+    "@cleartrip/ct-design-types": "5.11.0-SNAPSHOT-native-main.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/Shimmer.tsx

@@ -2,18 +2,13 @@ import { memo } from 'react';
 
 import { Container } from '@cleartrip/ct-design-container';
 import { useStyles } from '@cleartrip/ct-design-style-manager';
+import type { Styles } from '@cleartrip/ct-design-types';
 
-import shimmerWrapperStyles, { MaxBorderRadiusValue, shimmerGradient, shimmerKeyframes } from './style';
+import shimmerWrapperStyles, { MaxBorderRadiusValue, shimmerAnimatedClass, shimmerStaticClass } from './style';
 import { ShimmerProps } from './type';
 
 /**
  * Resolves the border-radius applied to the wrapper based on `shape`.
- *
- * `circle` tries to produce a true circle/pill using `height / 2` when
- * the caller supplied a numeric height; for string heights (e.g.
- * `'40px'`) arithmetic would yield `NaN`, so we fall back to
- * `MaxBorderRadiusValue` which is large enough to full-round any
- * realistic shimmer. `rect` applies `borderRadius` directly.
  */
 function resolveBorderRadius(
   shape: 'rect' | 'circle',
@@ -29,42 +24,43 @@ function resolveBorderRadius(
 /**
  * Web implementation of `Shimmer`.
  *
- * Migrated from aldenui (`core/components/components/Shimmer`) per
- * Migration.MD:
- *   - Drop the previous `@emotion/styled` `StyledShimmer` in favour of
- *     Container + composed `styleConfig.root` slots.
- *   - Static wrapper styles (seed background, overflow) live in
- *     `style.ts`; the animated gradient + keyframe reference is
- *     embedded into the dynamic style object built by `useStyles` so
- *     emotion caches the `@keyframes` declaration once per page and
- *     the Container's internal `useWebMergeStyles` handles the rest.
- *   - Dynamic slot holds width/height/borderRadius + animation so
- *     memoisation follows the input deps.
+ * Dimension contract matches native: `width` / `height` from props only.
+ * Do not set a fixed minWidth — that forces placeholders wider than their
+ * card (e.g. width="100%" inside a padded STACK). Parent clipping comes from
+ * `shimmerWrapperStyles.shimmerWrapper` (`overflow: hidden`, `width/height: 100%`).
  */
-const Shimmer = memo(({ width, height, shape = 'rect', borderRadius = 8, styleConfig }: ShimmerProps) => {
-  const dynamicStyles = useStyles(
-    () => ({
-      container: {
-        width: width ?? '100%',
-        height: height ?? '100%',
-        borderRadius: resolveBorderRadius(shape, height, borderRadius),
-        background: shimmerGradient,
-        minWidth: 400,
-        backgroundSize: '150% 100%',
-        animation: `${shimmerKeyframes} 1.5s infinite linear`,
-      },
-    }),
-    [width, height, shape, borderRadius],
-  );
+const Shimmer = memo(
+  ({ width, height, shape = 'rect', borderRadius = 8, styleConfig, variant = 'animated' }: ShimmerProps) => {
+    const dynamicStyles = useStyles(
+      () => ({
+        container: {
+          width: width ?? '100%',
+          height: height ?? '100%',
+          maxWidth: '100%',
+          alignSelf: 'stretch',
+          boxSizing: 'border-box',
+          borderRadius: resolveBorderRadius(shape, height, borderRadius),
+        },
+      }),
+      [width, height, shape, borderRadius],
+    );
+
+    const shimmerVisualClass = (variant === 'animated' ? shimmerAnimatedClass : shimmerStaticClass) as Styles;
 
-  return (
-    <Container
-      styleConfig={{
-        root: [shimmerWrapperStyles.shimmerWrapper, dynamicStyles.container, ...(styleConfig?.root || [])],
-      }}
-    />
-  );
-});
+    return (
+      <Container
+        styleConfig={{
+          root: [
+            shimmerWrapperStyles.shimmerWrapper,
+            dynamicStyles.container,
+            shimmerVisualClass,
+            ...(styleConfig?.root || []),
+          ],
+        }}
+      />
+    );
+  },
+);
 
 Shimmer.displayName = 'Shimmer';
 

package/src/style.ts

@@ -1,4 +1,4 @@
-import { keyframes } from '@emotion/css';
+import { css, keyframes } from '@emotion/css';
 
 import { makeStyles } from '@cleartrip/ct-design-style-manager';
 
@@ -26,6 +26,17 @@ export const shimmerKeyframes = keyframes`
  */
 export const shimmerGradient = 'linear-gradient(to right, #e0e0e0 0%, #ffffff 50%, #e0e0e0 100%)';
 
+export const shimmerAnimatedClass = css({
+  backgroundImage: shimmerGradient,
+  backgroundSize: '150% 100%',
+  animation: `${shimmerKeyframes} 1.5s infinite linear`,
+});
+
+export const shimmerStaticClass = css({
+  backgroundImage: shimmerGradient,
+  backgroundSize: '100% 100%',
+});
+
 /**
  * Static wrapper styles shared by web and native. On web, seeds the
  * animated gradient + keyframe sweep. On native, only the seed