@cleartrip/ct-design-safe-area-container 4.0.0-SNAPSHOT-test.0

package/README.md

@@ -0,0 +1,73 @@
+# SafeAreaContainer
+
+A container that respects safe area boundaries on mobile devices.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-safe-area-container
+# or
+pnpm add @cleartrip/ct-design-safe-area-container
+```
+
+### 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 { SafeAreaContainer } from '@cleartrip/ct-design-safe-area-container';
+
+function Example() {
+  return (
+    <SafeAreaContainer>
+      {/* Basic usage */}
+    </SafeAreaContainer>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | — | ✅ Yes | Content rendered inside the safe-area padded wrapper. |
+| `styleConfig` | `SafeAreaContainerStyleConfigProps` | — | No | Optional style overrides applied after the computed safe-area |
+
+
+---
+
+## 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 { SafeAreaContainer } from 'yagami/core/components';
++ import { SafeAreaContainer } from '@cleartrip/ct-design-safe-area-container';
+```

package/dist/SafeAreaContainer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ISafeAreaContainer } from './type';
+declare const SafeAreaContainer: React.FC<ISafeAreaContainer>;
+export default SafeAreaContainer;
+//# sourceMappingURL=SafeAreaContainer.d.ts.map

package/dist/SafeAreaContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SafeAreaContainer.d.ts","sourceRoot":"","sources":["../packages/components/SafeAreaContainer/src/SafeAreaContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAY5C,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkBnD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/dist/SafeAreaContainer.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ISafeAreaContainer } from './type';
+declare const SafeAreaContainer: React.FC<ISafeAreaContainer>;
+export default SafeAreaContainer;
+//# sourceMappingURL=SafeAreaContainer.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SafeAreaContainer.native.d.ts","sourceRoot":"","sources":["../packages/components/SafeAreaContainer/src/SafeAreaContainer.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAY5C,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkBnD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/dist/ct-design-safe-area-container.browser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("@cleartrip/ct-design-style-manager"),r=require("react"),s=require("react-native");function n(e){return e&&e.__esModule?e:{default:e}}var a=n(r);const o=({insets:e})=>{var t,r,s;return{paddingTop:null!==(t=e.top)&&void 0!==t?t:0,paddingBottom:0,paddingLeft:null!==(r=e.left)&&void 0!==r?r:0,paddingRight:null!==(s=e.right)&&void 0!==s?s:0,flex:1}},i=()=>({top:0,bottom:0,left:0,right:0}),l=({children:r,styleConfig:s={}})=>{const n={top:0,bottom:0,left:0,right:0},a=t.useStyles(()=>({root:o({insets:n})}),[n]),{root:i=[]}=s||{},l=t.useWebMergeStyles([a.root,...i],[a.root,i]);return e.jsx("div",{className:l,children:r})};l.displayName="SafeAreaContainer";const u={},d=r.createContext({insets:u});exports.DEFAULT_INSETS=u,exports.SafeAreaContainer=l,exports.SafeAreaContext=d,exports.SafeAreaProvider=({children:t,initialMetrics:n=u})=>{const[o,i]=a.default.useState(n),l=r.useCallback(e=>{i(e)},[]);return e.jsx(s.SafeAreaView,{children:e.jsx(d.Provider,{value:{insets:o,handleInsets:l},children:t})})},exports.getSafeAreaContainerStyles=o,exports.useGetSafeAreaInsets=()=>{const{insets:e}=r.useContext(d);return e},exports.useHandleSafeAreaInsets=()=>{const{handleInsets:e}=r.useContext(d);return e},exports.useSafeArea=()=>r.useContext(d),exports.useSafeAreaInset=i,exports.useSetSafeAreaInsets=(e,t)=>{const{handleInsets:s}=r.useContext(d);r.useEffect(()=>(null==s||s({top:e,bottom:t}),()=>{null==s||s(u)}),[s,e,t])};
+//# sourceMappingURL=ct-design-safe-area-container.browser.cjs.js.map

package/dist/ct-design-safe-area-container.browser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-safe-area-container.browser.cjs.js","sources":["../packages/components/SafeAreaContainer/src/style.ts","../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.ts","../packages/components/SafeAreaContainer/src/SafeAreaContainer.tsx","../packages/components/SafeAreaContainer/src/provider/hooks.ts","../packages/components/SafeAreaContainer/src/provider/index.tsx"],"sourcesContent":[null,null,null,null,null],"names":["getSafeAreaContainerStyles","insets","paddingTop","_a","top","paddingBottom","paddingLeft","_b","left","paddingRight","_c","right","flex","useSafeAreaInset","bottom","SafeAreaContainer","children","styleConfig","containerStyles","useStyles","root","customRootStyles","mergedRootStyles","useWebMergeStyles","_jsx","className","displayName","DEFAULT_INSETS","SafeAreaContext","createContext","initialMetrics","setInsets","React","useState","handleInsets","useCallback","newInsets","SafeAreaView","Provider","value","useContext","useEffect"],"mappings":"iNAWaA,EAA6B,EAAGC,uBAC3C,MAAO,CACLC,mBAAYC,EAAAF,EAAOG,mBAAO,EAC1BC,cAAe,EACfC,oBAAaC,EAAAN,EAAOO,oBAAQ,EAC5BC,qBAAcC,EAAAT,EAAOU,qBAAS,EAC9BC,KAAM,ICTJC,EAAmB,KAChB,CACLT,IAAK,EACLU,OAAQ,EACRN,KAAM,EACNG,MAAO,ICILI,EAAkD,EAAGC,WAAUC,cAAc,CAAE,MACnF,MAAMhB,EDTC,CACLG,IAAK,EACLU,OAAQ,EACRN,KAAM,EACNG,MAAO,GCOHO,EAAkBC,EAAAA,UACtB,KAAO,CACLC,KAAMpB,EAA2B,CAAEC,aAErC,CAACA,KAGKmB,KAAMC,EAAmB,IAAOJ,GAAe,CAAA,EAEjDK,EAAmBC,EAAAA,kBACvB,CAACL,EAAgBE,QAASC,GAC1B,CAACH,EAAgBE,KAAMC,IAGzB,OAAOG,EAAAA,WAAKC,UAAWH,EAAmBN,SAAAA,KAG5CD,EAAkBW,YAAc,oBC5BnB,MCHAC,EAAiC,CAAG,EAEpCC,EAAkBC,EAAaA,cAAsB,CAAE5B,OAAQ0B,4GAYf,EAAGX,WAAUc,iBAAiBH,MACzF,MAAO1B,EAAQ8B,GAAaC,EAAAA,QAAMC,SAAyBH,GAErDI,EAAeC,cAAaC,IAChCL,EAAUK,IACT,IAEH,OACEZ,EAAAA,IAACa,EAAAA,aAAY,CAAArB,SACXQ,MAACI,EAAgBU,SAAS,CAAAC,MAAO,CAAEtC,SAAQiC,yBAAiBlB,yEDb9B,KAClC,MAAMf,OAAEA,GAAWuC,EAAUA,WAAsBZ,GACnD,OAAO3B,mCAQ8B,KACrC,MAAMiC,aAAEA,GAAiBM,EAAUA,WAAsBZ,GACzD,OAAOM,uBAnBkB,IAAMM,EAAUA,WAAsBZ,2DA2B7B,CAACxB,EAAcU,KACjD,MAAMoB,aAAEA,GAAiBM,EAAUA,WAAsBZ,GAEzDa,EAAAA,UAAU,KACRP,SAAAA,EAAe,CAAE9B,MAAKU,WACf,KACLoB,SAAAA,EAAeP,KAEhB,CAACO,EAAc9B,EAAKU"}

package/dist/ct-design-safe-area-container.browser.esm.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import{useStyles as e,useWebMergeStyles as n}from"@cleartrip/ct-design-style-manager";import r,{useContext as o,useEffect as i,createContext as s,useCallback as l}from"react";import{SafeAreaView as a}from"react-native";const d=({insets:t})=>{var e,n,r;return{paddingTop:null!==(e=t.top)&&void 0!==e?e:0,paddingBottom:0,paddingLeft:null!==(n=t.left)&&void 0!==n?n:0,paddingRight:null!==(r=t.right)&&void 0!==r?r:0,flex:1}},c=()=>({top:0,bottom:0,left:0,right:0}),m=({children:r,styleConfig:o={}})=>{const i={top:0,bottom:0,left:0,right:0},s=e(()=>({root:d({insets:i})}),[i]),{root:l=[]}=o||{},a=n([s.root,...l],[s.root,l]);return t("div",{className:a,children:r})};m.displayName="SafeAreaContainer";const p=()=>o(v),u=()=>{const{insets:t}=o(v);return t},h=()=>{const{handleInsets:t}=o(v);return t},f=(t,e)=>{const{handleInsets:n}=o(v);i(()=>(null==n||n({top:t,bottom:e}),()=>{null==n||n(g)}),[n,t,e])},g={},v=s({insets:g}),b=({children:e,initialMetrics:n=g})=>{const[o,i]=r.useState(n),s=l(t=>{i(t)},[]);return t(a,{children:t(v.Provider,{value:{insets:o,handleInsets:s},children:e})})};export{g as DEFAULT_INSETS,m as SafeAreaContainer,v as SafeAreaContext,b as SafeAreaProvider,d as getSafeAreaContainerStyles,u as useGetSafeAreaInsets,h as useHandleSafeAreaInsets,p as useSafeArea,c as useSafeAreaInset,f as useSetSafeAreaInsets};
+//# sourceMappingURL=ct-design-safe-area-container.browser.esm.js.map

package/dist/ct-design-safe-area-container.browser.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-safe-area-container.browser.esm.js","sources":["../packages/components/SafeAreaContainer/src/style.ts","../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.ts","../packages/components/SafeAreaContainer/src/SafeAreaContainer.tsx","../packages/components/SafeAreaContainer/src/provider/hooks.ts","../packages/components/SafeAreaContainer/src/provider/index.tsx"],"sourcesContent":[null,null,null,null,null],"names":["getSafeAreaContainerStyles","insets","paddingTop","_a","top","paddingBottom","paddingLeft","_b","left","paddingRight","_c","right","flex","useSafeAreaInset","bottom","SafeAreaContainer","children","styleConfig","containerStyles","useStyles","root","customRootStyles","mergedRootStyles","useWebMergeStyles","_jsx","className","displayName","useSafeArea","useContext","SafeAreaContext","useGetSafeAreaInsets","useHandleSafeAreaInsets","handleInsets","useSetSafeAreaInsets","useEffect","DEFAULT_INSETS","createContext","SafeAreaProvider","initialMetrics","setInsets","React","useState","useCallback","newInsets","SafeAreaView","Provider","value"],"mappings":"yQAWaA,EAA6B,EAAGC,uBAC3C,MAAO,CACLC,mBAAYC,EAAAF,EAAOG,mBAAO,EAC1BC,cAAe,EACfC,oBAAaC,EAAAN,EAAOO,oBAAQ,EAC5BC,qBAAcC,EAAAT,EAAOU,qBAAS,EAC9BC,KAAM,ICTJC,EAAmB,KAChB,CACLT,IAAK,EACLU,OAAQ,EACRN,KAAM,EACNG,MAAO,ICILI,EAAkD,EAAGC,WAAUC,cAAc,CAAE,MACnF,MAAMhB,EDTC,CACLG,IAAK,EACLU,OAAQ,EACRN,KAAM,EACNG,MAAO,GCOHO,EAAkBC,EACtB,KAAO,CACLC,KAAMpB,EAA2B,CAAEC,aAErC,CAACA,KAGKmB,KAAMC,EAAmB,IAAOJ,GAAe,CAAA,EAEjDK,EAAmBC,EACvB,CAACL,EAAgBE,QAASC,GAC1B,CAACH,EAAgBE,KAAMC,IAGzB,OAAOG,SAAKC,UAAWH,EAAmBN,SAAAA,KAG5CD,EAAkBW,YAAc,oBC5BnB,MAAAC,EAAc,IAAMC,EAAgCC,GAOpDC,EAAuB,KAClC,MAAM7B,OAAEA,GAAW2B,EAAgCC,GACnD,OAAO5B,GAQI8B,EAA0B,KACrC,MAAMC,aAAEA,GAAiBJ,EAAgCC,GACzD,OAAOG,GAQIC,EAAuB,CAAC7B,EAAcU,KACjD,MAAMkB,aAAEA,GAAiBJ,EAAgCC,GAEzDK,EAAU,KACRF,SAAAA,EAAe,CAAE5B,MAAKU,WACf,KACLkB,SAAAA,EAAeG,KAEhB,CAACH,EAAc5B,EAAKU,KCtCZqB,EAAiC,CAAG,EAEpCN,EAAkBO,EAAmC,CAAEnC,OAAQkC,IAY/DE,EAAgD,EAAGrB,WAAUsB,iBAAiBH,MACzF,MAAOlC,EAAQsC,GAAaC,EAAMC,SAAyBH,GAErDN,EAAeU,EAAaC,IAChCJ,EAAUI,IACT,IAEH,OACEnB,EAACoB,EAAY,CAAA5B,SACXQ,EAACK,EAAgBgB,SAAS,CAAAC,MAAO,CAAE7C,SAAQ+B,yBAAiBhB"}

package/dist/ct-design-safe-area-container.cjs.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var React = require('react');
+var reactNative = require('react-native');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const getSafeAreaContainerStyles = ({ insets }) => {
+    var _a, _b, _c;
+    return {
+        paddingTop: (_a = insets.top) !== null && _a !== void 0 ? _a : 0,
+        paddingBottom: 0,
+        paddingLeft: (_b = insets.left) !== null && _b !== void 0 ? _b : 0,
+        paddingRight: (_c = insets.right) !== null && _c !== void 0 ? _c : 0,
+        flex: 1,
+    };
+};
+
+const useSafeAreaInset = () => {
+    return {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    };
+};
+
+const SafeAreaContainer = ({ children, styleConfig = {} }) => {
+    const insets = useSafeAreaInset();
+    const containerStyles = ctDesignStyleManager.useStyles(() => ({
+        root: getSafeAreaContainerStyles({ insets }),
+    }), [insets]);
+    const { root: customRootStyles = [] } = styleConfig || {};
+    const mergedRootStyles = ctDesignStyleManager.useWebMergeStyles([containerStyles.root, ...customRootStyles], [containerStyles.root, customRootStyles]);
+    return jsxRuntime.jsx("div", { className: mergedRootStyles, children: children });
+};
+SafeAreaContainer.displayName = 'SafeAreaContainer';
+
+const useSafeArea = () => React.useContext(SafeAreaContext);
+const useGetSafeAreaInsets = () => {
+    const { insets } = React.useContext(SafeAreaContext);
+    return insets;
+};
+const useHandleSafeAreaInsets = () => {
+    const { handleInsets } = React.useContext(SafeAreaContext);
+    return handleInsets;
+};
+const useSetSafeAreaInsets = (top, bottom) => {
+    const { handleInsets } = React.useContext(SafeAreaContext);
+    React.useEffect(() => {
+        handleInsets === null || handleInsets === void 0 ? void 0 : handleInsets({ top, bottom });
+        return () => {
+            handleInsets === null || handleInsets === void 0 ? void 0 : handleInsets(DEFAULT_INSETS);
+        };
+    }, [handleInsets, top, bottom]);
+};
+
+const DEFAULT_INSETS = {};
+const SafeAreaContext = React.createContext({ insets: DEFAULT_INSETS });
+const SafeAreaProvider = ({ children, initialMetrics = DEFAULT_INSETS }) => {
+    const [insets, setInsets] = React__default.default.useState(initialMetrics);
+    const handleInsets = React.useCallback((newInsets) => {
+        setInsets(newInsets);
+    }, []);
+    return (jsxRuntime.jsx(reactNative.SafeAreaView, { children: jsxRuntime.jsx(SafeAreaContext.Provider, { value: { insets, handleInsets }, children: children }) }));
+};
+
+exports.DEFAULT_INSETS = DEFAULT_INSETS;
+exports.SafeAreaContainer = SafeAreaContainer;
+exports.SafeAreaContext = SafeAreaContext;
+exports.SafeAreaProvider = SafeAreaProvider;
+exports.getSafeAreaContainerStyles = getSafeAreaContainerStyles;
+exports.useGetSafeAreaInsets = useGetSafeAreaInsets;
+exports.useHandleSafeAreaInsets = useHandleSafeAreaInsets;
+exports.useSafeArea = useSafeArea;
+exports.useSafeAreaInset = useSafeAreaInset;
+exports.useSetSafeAreaInsets = useSetSafeAreaInsets;
+//# sourceMappingURL=ct-design-safe-area-container.cjs.js.map

package/dist/ct-design-safe-area-container.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-safe-area-container.cjs.js","sources":["../packages/components/SafeAreaContainer/src/style.ts","../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.ts","../packages/components/SafeAreaContainer/src/SafeAreaContainer.tsx","../packages/components/SafeAreaContainer/src/provider/hooks.ts","../packages/components/SafeAreaContainer/src/provider/index.tsx"],"sourcesContent":[null,null,null,null,null],"names":["useStyles","useWebMergeStyles","_jsx","useContext","useEffect","createContext","React","useCallback","SafeAreaView"],"mappings":"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"}

package/dist/ct-design-safe-area-container.esm.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import React, { useContext, useEffect, createContext, useCallback } from 'react';
+import { SafeAreaView } from 'react-native';
+
+const getSafeAreaContainerStyles = ({ insets }) => {
+    var _a, _b, _c;
+    return {
+        paddingTop: (_a = insets.top) !== null && _a !== void 0 ? _a : 0,
+        paddingBottom: 0,
+        paddingLeft: (_b = insets.left) !== null && _b !== void 0 ? _b : 0,
+        paddingRight: (_c = insets.right) !== null && _c !== void 0 ? _c : 0,
+        flex: 1,
+    };
+};
+
+const useSafeAreaInset = () => {
+    return {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    };
+};
+
+const SafeAreaContainer = ({ children, styleConfig = {} }) => {
+    const insets = useSafeAreaInset();
+    const containerStyles = useStyles(() => ({
+        root: getSafeAreaContainerStyles({ insets }),
+    }), [insets]);
+    const { root: customRootStyles = [] } = styleConfig || {};
+    const mergedRootStyles = useWebMergeStyles([containerStyles.root, ...customRootStyles], [containerStyles.root, customRootStyles]);
+    return jsx("div", { className: mergedRootStyles, children: children });
+};
+SafeAreaContainer.displayName = 'SafeAreaContainer';
+
+const useSafeArea = () => useContext(SafeAreaContext);
+const useGetSafeAreaInsets = () => {
+    const { insets } = useContext(SafeAreaContext);
+    return insets;
+};
+const useHandleSafeAreaInsets = () => {
+    const { handleInsets } = useContext(SafeAreaContext);
+    return handleInsets;
+};
+const useSetSafeAreaInsets = (top, bottom) => {
+    const { handleInsets } = useContext(SafeAreaContext);
+    useEffect(() => {
+        handleInsets === null || handleInsets === void 0 ? void 0 : handleInsets({ top, bottom });
+        return () => {
+            handleInsets === null || handleInsets === void 0 ? void 0 : handleInsets(DEFAULT_INSETS);
+        };
+    }, [handleInsets, top, bottom]);
+};
+
+const DEFAULT_INSETS = {};
+const SafeAreaContext = createContext({ insets: DEFAULT_INSETS });
+const SafeAreaProvider = ({ children, initialMetrics = DEFAULT_INSETS }) => {
+    const [insets, setInsets] = React.useState(initialMetrics);
+    const handleInsets = useCallback((newInsets) => {
+        setInsets(newInsets);
+    }, []);
+    return (jsx(SafeAreaView, { children: jsx(SafeAreaContext.Provider, { value: { insets, handleInsets }, children: children }) }));
+};
+
+export { DEFAULT_INSETS, SafeAreaContainer, SafeAreaContext, SafeAreaProvider, getSafeAreaContainerStyles, useGetSafeAreaInsets, useHandleSafeAreaInsets, useSafeArea, useSafeAreaInset, useSetSafeAreaInsets };
+//# sourceMappingURL=ct-design-safe-area-container.esm.js.map

package/dist/ct-design-safe-area-container.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-safe-area-container.esm.js","sources":["../packages/components/SafeAreaContainer/src/style.ts","../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.ts","../packages/components/SafeAreaContainer/src/SafeAreaContainer.tsx","../packages/components/SafeAreaContainer/src/provider/hooks.ts","../packages/components/SafeAreaContainer/src/provider/index.tsx"],"sourcesContent":[null,null,null,null,null],"names":["_jsx"],"mappings":"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"}

package/dist/ct-design-safe-area-container.umd.js

@@ -0,0 +1,83 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@cleartrip/ct-design-style-manager'), require('react'), require('react-native')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@cleartrip/ct-design-style-manager', 'react', 'react-native'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemSafeAreaContainer = {}, global.jsxRuntime, global.ctDesignStyleManager, global.React, global.reactNative));
+})(this, (function (exports, jsxRuntime, ctDesignStyleManager, React, reactNative) { 'use strict';
+
+    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+    var React__default = /*#__PURE__*/_interopDefault(React);
+
+    const getSafeAreaContainerStyles = ({ insets }) => {
+        var _a, _b, _c;
+        return {
+            paddingTop: (_a = insets.top) !== null && _a !== void 0 ? _a : 0,
+            paddingBottom: 0,
+            paddingLeft: (_b = insets.left) !== null && _b !== void 0 ? _b : 0,
+            paddingRight: (_c = insets.right) !== null && _c !== void 0 ? _c : 0,
+            flex: 1,
+        };
+    };
+
+    const useSafeAreaInset = () => {
+        return {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+        };
+    };
+
+    const SafeAreaContainer = ({ children, styleConfig = {} }) => {
+        const insets = useSafeAreaInset();
+        const containerStyles = ctDesignStyleManager.useStyles(() => ({
+            root: getSafeAreaContainerStyles({ insets }),
+        }), [insets]);
+        const { root: customRootStyles = [] } = styleConfig || {};
+        const mergedRootStyles = ctDesignStyleManager.useWebMergeStyles([containerStyles.root, ...customRootStyles], [containerStyles.root, customRootStyles]);
+        return jsxRuntime.jsx("div", { className: mergedRootStyles, children: children });
+    };
+    SafeAreaContainer.displayName = 'SafeAreaContainer';
+
+    const useSafeArea = () => React.useContext(SafeAreaContext);
+    const useGetSafeAreaInsets = () => {
+        const { insets } = React.useContext(SafeAreaContext);
+        return insets;
+    };
+    const useHandleSafeAreaInsets = () => {
+        const { handleInsets } = React.useContext(SafeAreaContext);
+        return handleInsets;
+    };
+    const useSetSafeAreaInsets = (top, bottom) => {
+        const { handleInsets } = React.useContext(SafeAreaContext);
+        React.useEffect(() => {
+            handleInsets === null || handleInsets === void 0 ? void 0 : handleInsets({ top, bottom });
+            return () => {
+                handleInsets === null || handleInsets === void 0 ? void 0 : handleInsets(DEFAULT_INSETS);
+            };
+        }, [handleInsets, top, bottom]);
+    };
+
+    const DEFAULT_INSETS = {};
+    const SafeAreaContext = React.createContext({ insets: DEFAULT_INSETS });
+    const SafeAreaProvider = ({ children, initialMetrics = DEFAULT_INSETS }) => {
+        const [insets, setInsets] = React__default.default.useState(initialMetrics);
+        const handleInsets = React.useCallback((newInsets) => {
+            setInsets(newInsets);
+        }, []);
+        return (jsxRuntime.jsx(reactNative.SafeAreaView, { children: jsxRuntime.jsx(SafeAreaContext.Provider, { value: { insets, handleInsets }, children: children }) }));
+    };
+
+    exports.DEFAULT_INSETS = DEFAULT_INSETS;
+    exports.SafeAreaContainer = SafeAreaContainer;
+    exports.SafeAreaContext = SafeAreaContext;
+    exports.SafeAreaProvider = SafeAreaProvider;
+    exports.getSafeAreaContainerStyles = getSafeAreaContainerStyles;
+    exports.useGetSafeAreaInsets = useGetSafeAreaInsets;
+    exports.useHandleSafeAreaInsets = useHandleSafeAreaInsets;
+    exports.useSafeArea = useSafeArea;
+    exports.useSafeAreaInset = useSafeAreaInset;
+    exports.useSetSafeAreaInsets = useSetSafeAreaInsets;
+
+}));
+//# sourceMappingURL=ct-design-safe-area-container.umd.js.map

package/dist/ct-design-safe-area-container.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-safe-area-container.umd.js","sources":["../packages/components/SafeAreaContainer/src/style.ts","../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.ts","../packages/components/SafeAreaContainer/src/SafeAreaContainer.tsx","../packages/components/SafeAreaContainer/src/provider/hooks.ts","../packages/components/SafeAreaContainer/src/provider/index.tsx"],"sourcesContent":[null,null,null,null,null],"names":["useStyles","useWebMergeStyles","_jsx","useContext","useEffect","createContext","React","useCallback","SafeAreaView"],"mappings":"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"}

package/dist/hooks/useSafeAreaInset/index.d.ts

@@ -0,0 +1,4 @@
+import type { SafeAreaInsets } from '../../type';
+declare const useSafeAreaInset: () => Required<SafeAreaInsets>;
+export default useSafeAreaInset;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useSafeAreaInset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAQjD,QAAA,MAAM,gBAAgB,QAAO,QAAQ,CAAC,cAAc,CAOnD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/hooks/useSafeAreaInset/index.native.d.ts

@@ -0,0 +1,4 @@
+import type { SafeAreaInsets } from '../../type';
+declare const useSafeAreaInset: () => Required<SafeAreaInsets>;
+export default useSafeAreaInset;
+//# sourceMappingURL=index.native.d.ts.map

package/dist/hooks/useSafeAreaInset/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../packages/components/SafeAreaContainer/src/hooks/useSafeAreaInset/index.native.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAQjD,QAAA,MAAM,gBAAgB,QAAO,QAAQ,CAAC,cAAc,CAGnD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as SafeAreaContainer } from './SafeAreaContainer';
+export { default as useSafeAreaInset } from './hooks/useSafeAreaInset';
+export * from './provider';
+export * from './type';
+export { getSafeAreaContainerStyles } from './style';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../packages/components/SafeAreaContainer/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACvE,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC"}

package/dist/provider/hooks.d.ts

@@ -0,0 +1,6 @@
+import type { SafeAreaContextType, SafeAreaInsets } from '../type';
+export declare const useSafeArea: () => SafeAreaContextType;
+export declare const useGetSafeAreaInsets: () => SafeAreaInsets;
+export declare const useHandleSafeAreaInsets: () => ((insets: SafeAreaInsets) => void) | undefined;
+export declare const useSetSafeAreaInsets: (top?: number, bottom?: number) => void;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/provider/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../packages/components/SafeAreaContainer/src/provider/hooks.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMnE,eAAO,MAAM,WAAW,2BAAyD,CAAC;AAOlF,eAAO,MAAM,oBAAoB,QAAO,cAGvC,CAAC;AAOF,eAAO,MAAM,uBAAuB,sDAGnC,CAAC;AAOF,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,EAAE,SAAS,MAAM,SASjE,CAAC"}

package/dist/provider/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ISafeAreaProvider, SafeAreaContextType, SafeAreaInsets } from '../type';
+export declare const DEFAULT_INSETS: SafeAreaInsets;
+export declare const SafeAreaContext: React.Context<SafeAreaContextType>;
+export declare const SafeAreaProvider: React.FC<ISafeAreaProvider>;
+export { useSafeArea, useGetSafeAreaInsets, useHandleSafeAreaInsets, useSetSafeAreaInsets } from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/SafeAreaContainer/src/provider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEtF,eAAO,MAAM,cAAc,EAAE,cAAmB,CAAC;AAEjD,eAAO,MAAM,eAAe,oCAAiE,CAAC;AAY9F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAYxD,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

package/dist/style.d.ts

@@ -0,0 +1,11 @@
+import { SafeAreaInsets } from './type';
+export declare const getSafeAreaContainerStyles: ({ insets }: {
+    insets: SafeAreaInsets;
+}) => {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    flex: number;
+};
+//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/SafeAreaContainer/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAWxC,eAAO,MAAM,0BAA0B,GAAI,YAAY;IAAE,MAAM,EAAE,cAAc,CAAA;CAAE;;;;;;CAQhF,CAAC"}

package/dist/type.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import type { Styles, ViewStyle } from '@cleartrip/ct-design-types';
+export interface SafeAreaInsets {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+export interface SafeAreaContextType {
+    insets: SafeAreaInsets;
+    handleInsets?: (insets: SafeAreaInsets) => void;
+}
+export interface ISafeAreaProvider {
+    children: ReactNode;
+    initialMetrics?: SafeAreaInsets;
+}
+export interface SafeAreaContainerStyleConfigProps {
+    root?: Styles[] | ViewStyle[];
+}
+export interface ISafeAreaContainer {
+    children: ReactNode;
+    styleConfig?: SafeAreaContainerStyleConfigProps;
+}
+//# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/SafeAreaContainer/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAOpE,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD;AAKD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IAKpB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAOD,MAAM,WAAW,iCAAiC;IAIhD,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;CAC/B;AAKD,MAAM,WAAW,kBAAkB;IAIjC,QAAQ,EAAE,SAAS,CAAC;IAMpB,WAAW,CAAC,EAAE,iCAAiC,CAAC;CACjD"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cleartrip/ct-design-safe-area-container",
+  "version": "4.0.0-SNAPSHOT-test.0",
+  "description": "SafeAreaContainer component — applies device safe-area insets via the ct-design-style-manager hooks on web and React Native.",
+  "types": "dist/index.d.ts",
+  "main": "./dist/ct-design-safe-area-container.cjs.js",
+  "jsnext:main": "dist/ct-design-safe-area-container.esm.js",
+  "module": "dist/ct-design-safe-area-container.esm.js",
+  "react-native": "src/index.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-safe-area-container.d.ts",
+      "import": "./dist/ct-design-safe-area-container.esm.js",
+      "default": "./dist/ct-design-safe-area-container.cjs.js"
+    }
+  },
+  "browser": {
+    "./dist/ct-design-safe-area-container.esm.js": "./dist/ct-design-safe-area-container.browser.esm.js",
+    "./dist/ct-design-safe-area-container.cjs.js": "./dist/ct-design-safe-area-container.browser.cjs.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-native": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Mukund <balmukund.kumar@cleartrip.com>",
+  "license": "ISC",
+  "scripts": {
+    "watch-package": "rollup -c -w",
+    "build-package": "rollup -c",
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish"
+  }
+}

package/src/SafeAreaContainer.native.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useStyles, useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { getSafeAreaContainerStyles } from './style';
+import { ISafeAreaContainer } from './type';
+
+/**
+ * React Native implementation of SafeAreaContainer.
+ *
+ * Reads real device insets via `react-native-safe-area-context` and
+ * applies them as padding on a plain `<View>`. Styles flow through the
+ * style-manager (`useStyles` for dynamic inset-driven values,
+ * `useNativeMergeStyles` for merging consumer overrides) so the
+ * component has zero dependency on aldenui's Container or legacy
+ * `useStyles` hook.
+ */
+const SafeAreaContainer: React.FC<ISafeAreaContainer> = ({ children, styleConfig = {} }) => {
+  const insets = useSafeAreaInsets();
+
+  const containerStyles = useStyles(
+    () => ({
+      root: getSafeAreaContainerStyles({ insets }),
+    }),
+    [insets],
+  );
+
+  const { root: rootStyles = [] } = styleConfig || {};
+
+  const mergedRootStyles = useNativeMergeStyles(
+    [containerStyles.root, ...rootStyles],
+    [containerStyles.root, styleConfig?.root],
+  );
+
+  return <View style={mergedRootStyles}>{children}</View>;
+};
+
+SafeAreaContainer.displayName = 'SafeAreaContainer';
+
+export default SafeAreaContainer;

package/src/SafeAreaContainer.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { getSafeAreaContainerStyles } from './style';
+import { ISafeAreaContainer } from './type';
+import useSafeAreaInset from './hooks/useSafeAreaInset';
+
+/**
+ * Web implementation of SafeAreaContainer.
+ *
+ * On the browser there is no true system safe-area (notch / home-bar), so
+ * `useSafeAreaInset` returns a zeroed inset object. The wrapper is still
+ * rendered as a plain semantic `<div>` styled via `useStyles` +
+ * `useWebMergeStyles` to stay consistent with the cross-platform
+ * contract documented in Migration.MD — no styled-components remain.
+ */
+const SafeAreaContainer: React.FC<ISafeAreaContainer> = ({ children, styleConfig = {} }) => {
+  const insets = useSafeAreaInset();
+
+  const containerStyles = useStyles(
+    () => ({
+      root: getSafeAreaContainerStyles({ insets }),
+    }),
+    [insets],
+  );
+
+  const { root: customRootStyles = [] } = styleConfig || {};
+
+  const mergedRootStyles = useWebMergeStyles(
+    [containerStyles.root, ...customRootStyles],
+    [containerStyles.root, customRootStyles],
+  );
+
+  return <div className={mergedRootStyles}>{children}</div>;
+};
+
+SafeAreaContainer.displayName = 'SafeAreaContainer';
+
+export default SafeAreaContainer;

package/src/hooks/useSafeAreaInset/index.native.ts

@@ -0,0 +1,16 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import type { SafeAreaInsets } from '../../type';
+
+/**
+ * React Native build: delegates to react-native-safe-area-context and
+ * guards against the provider missing at the root of the tree by
+ * falling back to a zeroed inset object (identical to the legacy
+ * aldenui implementation).
+ */
+const useSafeAreaInset = (): Required<SafeAreaInsets> => {
+  const insets = useSafeAreaInsets();
+  return insets || { top: 0, bottom: 0, left: 0, right: 0 };
+};
+
+export default useSafeAreaInset;

package/src/hooks/useSafeAreaInset/index.ts

@@ -0,0 +1,18 @@
+import type { SafeAreaInsets } from '../../type';
+
+/**
+ * Web fallback: browsers do not expose per-edge system insets, so we
+ * return an all-zero inset object. This mirrors the behaviour of the
+ * original aldenui hook and keeps parity with the native build-time
+ * contract so platform-shared code never has to branch on `Platform`.
+ */
+const useSafeAreaInset = (): Required<SafeAreaInsets> => {
+  return {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  };
+};
+
+export default useSafeAreaInset;

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as SafeAreaContainer } from './SafeAreaContainer';
+export { default as useSafeAreaInset } from './hooks/useSafeAreaInset';
+export * from './provider';
+export * from './type';
+export { getSafeAreaContainerStyles } from './style';

package/src/provider/hooks.ts

@@ -0,0 +1,46 @@
+import { useContext, useEffect } from 'react';
+
+import { DEFAULT_INSETS, SafeAreaContext } from './';
+import type { SafeAreaContextType, SafeAreaInsets } from '../type';
+
+/**
+ * Returns the full SafeAreaContext value (insets + the updater). Use this
+ * when a component needs both read and write access to the provider.
+ */
+export const useSafeArea = () => useContext<SafeAreaContextType>(SafeAreaContext);
+
+/**
+ * Convenience hook returning only the current `insets` slice of the
+ * context. Prefer this in read-only consumers to avoid re-rendering
+ * when the setter identity changes.
+ */
+export const useGetSafeAreaInsets = (): SafeAreaInsets => {
+  const { insets } = useContext<SafeAreaContextType>(SafeAreaContext);
+  return insets;
+};
+
+/**
+ * Returns the context's inset setter. Useful when a descendant has
+ * measured its own safe area (for example from a layout event) and
+ * wants to propagate the value up for siblings to consume.
+ */
+export const useHandleSafeAreaInsets = () => {
+  const { handleInsets } = useContext<SafeAreaContextType>(SafeAreaContext);
+  return handleInsets;
+};
+
+/**
+ * Imperatively pushes a `{ top, bottom }` inset pair into the provider
+ * for the lifetime of the calling component. On unmount the context is
+ * reset to `DEFAULT_INSETS` so nothing leaks between screens.
+ */
+export const useSetSafeAreaInsets = (top?: number, bottom?: number) => {
+  const { handleInsets } = useContext<SafeAreaContextType>(SafeAreaContext);
+
+  useEffect(() => {
+    handleInsets?.({ top, bottom });
+    return () => {
+      handleInsets?.(DEFAULT_INSETS);
+    };
+  }, [handleInsets, top, bottom]);
+};

package/src/provider/index.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useCallback } from 'react';
+
+import { SafeAreaView } from 'react-native';
+
+import type { ISafeAreaProvider, SafeAreaContextType, SafeAreaInsets } from '../type';
+
+export const DEFAULT_INSETS: SafeAreaInsets = {};
+
+export const SafeAreaContext = createContext<SafeAreaContextType>({ insets: DEFAULT_INSETS });
+
+/**
+ * Web build of SafeAreaProvider.
+ *
+ * The web target does not have a real safe-area primitive, so we lean
+ * on React Native's `SafeAreaView` (which is rendered as a plain
+ * `<View>` on web via react-native-web) purely to preserve the API
+ * shape. The `SafeAreaContext.Provider` is the part that actually
+ * matters: descendants rely on it for read/write access to the
+ * in-memory inset object.
+ */
+export const SafeAreaProvider: React.FC<ISafeAreaProvider> = ({ children, initialMetrics = DEFAULT_INSETS }) => {
+  const [insets, setInsets] = React.useState<SafeAreaInsets>(initialMetrics);
+
+  const handleInsets = useCallback((newInsets: SafeAreaInsets) => {
+    setInsets(newInsets);
+  }, []);
+
+  return (
+    <SafeAreaView>
+      <SafeAreaContext.Provider value={{ insets, handleInsets }}>{children}</SafeAreaContext.Provider>
+    </SafeAreaView>
+  );
+};
+
+export { useSafeArea, useGetSafeAreaInsets, useHandleSafeAreaInsets, useSetSafeAreaInsets } from './hooks';

package/src/style.ts

@@ -0,0 +1,20 @@
+import { SafeAreaInsets } from './type';
+
+/**
+ * Produces the root style block for the SafeAreaContainer. Padding is
+ * driven entirely by the insets so the wrapper is a straight port of
+ * the legacy aldenui behavior:
+ *   paddingTop    = insets.top
+ *   paddingBottom = 0  (match the original — bottom is intentionally ignored)
+ *   paddingLeft   = insets.left
+ *   paddingRight  = insets.right
+ */
+export const getSafeAreaContainerStyles = ({ insets }: { insets: SafeAreaInsets }) => {
+  return {
+    paddingTop: insets.top ?? 0,
+    paddingBottom: 0,
+    paddingLeft: insets.left ?? 0,
+    paddingRight: insets.right ?? 0,
+    flex: 1,
+  };
+};

package/src/type.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+
+import type { Styles, ViewStyle } from '@cleartrip/ct-design-types';
+
+/**
+ * Safe-area insets for the four edges of the device viewport.
+ * Values correspond to the space required to avoid system UI (notch,
+ * home indicator, status bar, etc.) in density-independent pixels.
+ */
+export interface SafeAreaInsets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+/**
+ * Shape of the SafeAreaContext value — exposes the current insets and
+ * an optional setter so descendants can push their measured values up.
+ */
+export interface SafeAreaContextType {
+  insets: SafeAreaInsets;
+  handleInsets?: (insets: SafeAreaInsets) => void;
+}
+
+/**
+ * Props accepted by `SafeAreaProvider`.
+ */
+export interface ISafeAreaProvider {
+  children: ReactNode;
+  /**
+   * Insets to seed the provider with. Useful for SSR or tests where
+   * the platform cannot supply real measurements.
+   */
+  initialMetrics?: SafeAreaInsets;
+}
+
+/**
+ * Style configuration for the SafeAreaContainer root element. Mirrors
+ * the pattern used by Container / Typography so consumers can override
+ * the default flex + padding block.
+ */
+export interface SafeAreaContainerStyleConfigProps {
+  /**
+   * Styles for the root wrapper element (web `<div>` or RN `View`).
+   */
+  root?: Styles[] | ViewStyle[];
+}
+
+/**
+ * Public props for the `SafeAreaContainer` component.
+ */
+export interface ISafeAreaContainer {
+  /**
+   * Content rendered inside the safe-area padded wrapper.
+   */
+  children: ReactNode;
+
+  /**
+   * Optional style overrides applied after the computed safe-area
+   * padding so consumers can always win the cascade.
+   */
+  styleConfig?: SafeAreaContainerStyleConfigProps;
+}