@cleartrip/ct-design-style-manager 4.0.0-rc → 5.0.0

package/dist/globalLayoutStyles/gs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gs.d.ts","sourceRoot":"","sources":["../../src/globalLayoutStyles/gs.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiYb,CAAC"}

package/dist/index.d.ts

@@ -3,4 +3,5 @@ import useWebMergeStyles from './useWebMergeStyles';
 import makeStyles from './makeStyles';
 import useNativeMergeStyles from './useNativeMergeStyles';
 export { useStyles, useWebMergeStyles, makeStyles, useNativeMergeStyles };
+export { gs } from './globalLayoutStyles/gs';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC;AAC1E,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/makeStyles/index.d.ts

@@ -1,5 +1,5 @@
 import { Theme as ThemeType } from '@cleartrip/ct-design-theme';
-import type { NamedStyles } from '@cleartrip/ct-design-types';
-declare function makeStyles<T extends NamedStyles<T>>(styleFactory: (theme: ThemeType) => T | NamedStyles<T>, customTheme?: ThemeType): T;
+import { NamedStyles } from '@cleartrip/ct-design-types';
+declare function makeStyles<T extends NamedStyles<T>>(styleFactory: (theme: ThemeType) => T | NamedStyles<T> | NamedStyles<unknown>, customTheme?: ThemeType): T;
 export default makeStyles;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/makeStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI9D,iBAAS,UAAU,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,EAC1C,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EACtD,WAAW,CAAC,EAAE,SAAS,GACtB,CAAC,CAyDH;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/makeStyles/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIzD,iBAAS,UAAU,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,EAC1C,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,EAC7E,WAAW,CAAC,EAAE,SAAS,GACtB,CAAC,CAyDH;AAED,eAAe,UAAU,CAAC"}

package/dist/makeStyles/index.native.d.ts

@@ -1,5 +1,6 @@
+import { NamedStyles } from '@cleartrip/ct-design-types';
 import { StyleSheet } from 'react-native';
 import { Theme as ThemeType } from '@cleartrip/ct-design-theme';
-declare function makeStyles<T extends StyleSheet.NamedStyles<T>>(styleFactory: (theme: ThemeType) => T | StyleSheet.NamedStyles<T>, customTheme?: ThemeType): T | StyleSheet.NamedStyles<T>;
+declare function makeStyles<T extends StyleSheet.NamedStyles<T>>(styleFactory: (theme: ThemeType) => T | NamedStyles<T> | NamedStyles<unknown>, customTheme?: ThemeType): T | NamedStyles<T> | NamedStyles<unknown>;
 export default makeStyles;
 //# sourceMappingURL=index.native.d.ts.map

package/dist/makeStyles/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/makeStyles/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEhE,iBAAS,UAAU,CAAC,CAAC,SAAS,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,EACrD,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,EACjE,WAAW,CAAC,EAAE,SAAS,GACtB,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAkC/B;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/makeStyles/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEhE,iBAAS,UAAU,CAAC,CAAC,SAAS,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,EACrD,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,EAC7E,WAAW,CAAC,EAAE,SAAS,GACtB,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAiC3C;AAED,eAAe,UAAU,CAAC"}

package/dist/useStyles/index.d.ts

@@ -1,6 +1,6 @@
 import { DependencyList } from 'react';
 import { Theme as ThemeType } from '@cleartrip/ct-design-theme';
 import type { NamedStyles } from '@cleartrip/ct-design-types';
-declare function useStyles<T extends NamedStyles<T>>(styleFactory: (theme: ThemeType) => T | NamedStyles<T>, dep: DependencyList): T;
+declare function useStyles<T extends NamedStyles<T>>(styleFactory: (theme: ThemeType) => T | NamedStyles<T> | NamedStyles<unknown>, dep: DependencyList): T;
 export default useStyles;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useStyles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,EACzC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,EACtD,GAAG,EAAE,cAAc,GAClB,CAAC,CASH;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useStyles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,EACzC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,EAC7E,GAAG,EAAE,cAAc,GAClB,CAAC,CASH;AAED,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-style-manager",
-  "version": "4.0.0-rc",
+  "version": "5.0.0",
   "description": "Style hooks",
   "types": "dist/index.d.ts",
   "react-native": "src/index.ts",
@@ -19,11 +19,11 @@
   "dependencies": {
     "@emotion/css": "11.13.4",
     "@react-native/normalize-colors": "^0.78.1",
-    "@cleartrip/ct-design-theme": "4.0.0-rc",
-    "@cleartrip/ct-design-types": "4.0.0-rc"
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-types": "5.0.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-types": "4.0.0-rc"
+    "@cleartrip/ct-design-types": "5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/globalLayoutStyles/gs.ts

@@ -0,0 +1,390 @@
+import makeStyles from '../makeStyles';
+
+/** Legacy Global-style layout utility map (AldenUI `Global` / trains `gs`). */
+
+export const gs = makeStyles((theme) => {
+  const { spacing } = theme;
+  return {
+    // Display
+    flex: { display: 'flex' as const },
+    'flex-1': { flex: 1 },
+
+    // Flex Direction
+    'flex-row': { flexDirection: 'row' as const },
+    'flex-column': { flexDirection: 'column' as const },
+    'flex-row-reverse': { flexDirection: 'row-reverse' as const },
+    'flex-column-reverse': { flexDirection: 'column-reverse' as const },
+
+    // font weights
+    'fw-400': { fontWeight: '400' as const },
+    'fw-500': { fontWeight: '500' as const },
+    'fw-600': { fontWeight: '600' as const },
+
+    // Flex Wrap
+    'flex-nowrap': { flexWrap: 'nowrap' as const },
+    'flex-wrap': { flexWrap: 'wrap' as const },
+    'flex-wrap-reverse': { flexWrap: 'wrap-reverse' as const },
+
+    // Flex Shrink
+    'flex-no-shrink': { flexShrink: spacing[0] },
+
+    // Align Items
+    'flex-stretch': { alignItems: 'stretch' as const },
+    'flex-top': { alignItems: 'flex-start' as const },
+    'flex-middle': { alignItems: 'center' as const },
+    'flex-bottom': { alignItems: 'flex-end' as const },
+    'flex-baseline': { alignItems: 'baseline' as const },
+
+    // Align Content
+    'flex-wrap-stretch': { alignContent: 'stretch' as const },
+    'flex-wrap-top': { alignContent: 'flex-start' as const },
+    'flex-wrap-middle': { alignContent: 'center' as const },
+    'flex-wrap-bottom': { alignContent: 'flex-end' as const },
+    'flex-wrap-between': { alignContent: 'space-between' as const },
+    'flex-wrap-around': { alignContent: 'space-around' as const },
+
+    // Justify Content
+    'flex-left': { justifyContent: 'flex-start' as const },
+    'flex-start': { justifyContent: 'flex-start' as const },
+    'flex-end': { justifyContent: 'flex-end' as const },
+    'flex-right': { justifyContent: 'flex-end' as const },
+    'flex-center': { justifyContent: 'center' as const },
+    'flex-between': { justifyContent: 'space-between' as const },
+    'flex-around': { justifyContent: 'space-around' as const },
+
+    // Flex Basis
+    'flex-basis-auto': { flexBasis: 'auto' as const },
+
+    // Row Gap
+    'flex-rg-1': { rowGap: spacing[1] },
+    'flex-rg-2': { rowGap: spacing[2] },
+    'flex-rg-3': { rowGap: spacing[3] },
+    'flex-rg-4': { rowGap: spacing[4] },
+    'flex-rg-6': { rowGap: spacing[6] },
+    'flex-rg-7': { rowGap: spacing[7] },
+    'flex-rg-8': { rowGap: spacing[8] },
+    'flex-rg-9': { rowGap: spacing[9] },
+    'flex-rg-10': { rowGap: spacing[10] },
+
+    // Column Gap
+    'flex-cg-1': { columnGap: spacing[1] },
+    'flex-cg-2': { columnGap: spacing[2] },
+    'flex-cg-3': { columnGap: spacing[3] },
+    'flex-cg-4': { columnGap: spacing[4] },
+    'flex-cg-6': { columnGap: spacing[6] },
+
+    // Gap
+    'flex-gap-0.5': { gap: spacing['0.5'] },
+    'flex-gap-1': { gap: spacing[1] },
+    'flex-gap-1.5': { gap: spacing['1.5'] },
+    'flex-gap-2': { gap: spacing[2] },
+    'flex-gap-3': { gap: spacing[3] },
+    'flex-gap-4': { gap: spacing[4] },
+    'flex-gap-6': { gap: spacing[6] },
+
+    // Width
+    'w-0p': { width: '0%' as const },
+    'w-10p': { width: '10%' as const },
+    'w-20p': { width: '20%' as const },
+    'w-30p': { width: '30%' as const },
+    'w-40p': { width: '40%' as const },
+    'w-50p': { width: '50%' as const },
+    'w-60p': { width: '60%' as const },
+    'w-70p': { width: '70%' as const },
+    'w-80p': { width: '80%' as const },
+    'w-90p': { width: '90%' as const },
+    'w-100p': { width: '100%' as const },
+    'w-0': { width: spacing[0] },
+    'w-1': { width: spacing[1] },
+    'w-2': { width: spacing[2] },
+    'w-3': { width: spacing[3] },
+    'w-4': { width: spacing[4] },
+    'w-5': { width: spacing[5] },
+    'w-6': { width: spacing[6] },
+    'w-7': { width: spacing[7] },
+    'w-8': { width: spacing[8] },
+    'w-9': { width: spacing[9] },
+    'w-10': { width: spacing[10] },
+    'w-14': { width: spacing[14] },
+    'w-16': { width: spacing[16] },
+
+    // top
+    't-0': { top: 0 },
+
+    // bottoms
+    'b-0': { bottom: 0 },
+
+    // lefts
+    'l-0': { left: 0 },
+
+    // Height
+    'h-0p': { height: '0%' as const },
+    'h-10p': { height: '10%' as const },
+    'h-20p': { height: '20%' as const },
+    'h-30p': { height: '30%' as const },
+    'h-40p': { height: '40%' as const },
+    'h-50p': { height: '50%' as const },
+    'h-60p': { height: '60%' as const },
+    'h-70p': { height: '70%' as const },
+    'h-80p': { height: '80%' as const },
+    'h-90p': { height: '90%' as const },
+    'h-100p': { height: '100%' as const },
+    'h-0': { height: spacing[0] },
+    'h-1': { height: spacing[1] },
+    'h-2': { height: spacing[2] },
+    'h-3': { height: spacing[3] },
+    'h-4': { height: spacing[4] },
+    'h-5': { height: spacing[5] },
+    'h-6': { height: spacing[6] },
+    'h-7': { height: spacing[7] },
+    'h-8': { height: spacing[8] },
+    'h-9': { height: spacing[9] },
+    'h-10': { height: spacing[10] },
+    'h-14': { height: spacing[14] },
+    'h-16': { height: spacing[16] },
+
+    // Margin
+    'm-0': { margin: spacing[0] },
+    'm-1': { margin: spacing[1] },
+    'm-2': { margin: spacing[2] },
+    'm-3': { margin: spacing[3] },
+    'm-4': { margin: spacing[4] },
+    'm-5': { margin: spacing[5] },
+    'm-6': { margin: spacing[6] },
+    'm-7': { margin: spacing[7] },
+    'm-8': { margin: spacing[8] },
+    'm-9': { margin: spacing[9] },
+    'm-10': { margin: spacing[10] },
+
+    // Margin Top
+    'mt-0': { marginTop: spacing[0] },
+    'mt-1': { marginTop: spacing[1] },
+    'mt-2': { marginTop: spacing[2] },
+    'mt-3': { marginTop: spacing[3] },
+    'mt-4': { marginTop: spacing[4] },
+    'mt-5': { marginTop: spacing[5] },
+    'mt-6': { marginTop: spacing[6] },
+    'mt-7': { marginTop: spacing[7] },
+    'mt-8': { marginTop: spacing[8] },
+    'mt-9': { marginTop: spacing[9] },
+    'mt-10': { marginTop: spacing[10] },
+
+    // Margin Bottom
+    'mb-0': { marginBottom: spacing[0] },
+    'mb-1': { marginBottom: spacing[1] },
+    'mb-2': { marginBottom: spacing[2] },
+    'mb-3': { marginBottom: spacing[3] },
+    'mb-4': { marginBottom: spacing[4] },
+    'mb-5': { marginBottom: spacing[5] },
+    'mb-6': { marginBottom: spacing[6] },
+    'mb-7': { marginBottom: spacing[7] },
+    'mb-8': { marginBottom: spacing[8] },
+    'mb-9': { marginBottom: spacing[9] },
+    'mb-10': { marginBottom: spacing[10] },
+
+    // Margin Left
+    'ml-0': { marginLeft: spacing[0] },
+    'ml-1': { marginLeft: spacing[1] },
+    'ml-2': { marginLeft: spacing[2] },
+    'ml-3': { marginLeft: spacing[3] },
+    'ml-4': { marginLeft: spacing[4] },
+    'ml-5': { marginLeft: spacing[5] },
+    'ml-6': { marginLeft: spacing[6] },
+    'ml-7': { marginLeft: spacing[7] },
+    'ml-8': { marginLeft: spacing[8] },
+    'ml-9': { marginLeft: spacing[9] },
+    'ml-10': { marginLeft: spacing[10] },
+
+    // Margin Right
+    'mr-0': { marginRight: spacing[0] },
+    'mr-1': { marginRight: spacing[1] },
+    'mr-1.5': { marginRight: spacing['1.5'] },
+    'mr-2': { marginRight: spacing[2] },
+    'mr-3': { marginRight: spacing[3] },
+    'mr-4': { marginRight: spacing[4] },
+    'mr-5': { marginRight: spacing[5] },
+    'mr-6': { marginRight: spacing[6] },
+    'mr-7': { marginRight: spacing[7] },
+    'mr-8': { marginRight: spacing[8] },
+    'mr-9': { marginRight: spacing[9] },
+    'mr-10': { marginRight: spacing[10] },
+
+    // Margin Horizontal
+    'mx-0': { marginHorizontal: spacing[0] },
+    'mx-1': { marginHorizontal: spacing[1] },
+    'mx-2': { marginHorizontal: spacing[2] },
+    'mx-3': { marginHorizontal: spacing[3] },
+    'mx-4': { marginHorizontal: spacing[4] },
+    'mx-5': { marginHorizontal: spacing[5] },
+    'mx-6': { marginHorizontal: spacing[6] },
+    'mx-7': { marginHorizontal: spacing[7] },
+    'mx-8': { marginHorizontal: spacing[8] },
+    'mx-9': { marginHorizontal: spacing[9] },
+    'mx-10': { marginHorizontal: spacing[10] },
+
+    // Margin Vertical
+    'my-0': { marginVertical: spacing[0] },
+    'my-1': { marginVertical: spacing[1] },
+    'my-2': { marginVertical: spacing[2] },
+    'my-3': { marginVertical: spacing[3] },
+    'my-4': { marginVertical: spacing[4] },
+    'my-5': { marginVertical: spacing[5] },
+    'my-6': { marginVertical: spacing[6] },
+    'my-7': { marginVertical: spacing[7] },
+    'my-8': { marginVertical: spacing[8] },
+    'my-9': { marginVertical: spacing[9] },
+    'my-10': { marginVertical: spacing[10] },
+
+    // Padding
+    'p-0': { padding: spacing[0] },
+    'p-1': { padding: spacing[1] },
+    'p-2': { padding: spacing[2] },
+    'p-3': { padding: spacing[3] },
+    'p-4': { padding: spacing[4] },
+    'p-5': { padding: spacing[5] },
+    'p-6': { padding: spacing[6] },
+    'p-7': { padding: spacing[7] },
+    'p-8': { padding: spacing[8] },
+    'p-9': { padding: spacing[9] },
+    'p-10': { padding: spacing[10] },
+
+    // Padding Top
+    'pt-0': { paddingTop: spacing[0] },
+    'pt-1': { paddingTop: spacing[1] },
+    'pt-2': { paddingTop: spacing[2] },
+    'pt-3': { paddingTop: spacing[3] },
+    'pt-4': { paddingTop: spacing[4] },
+    'pt-5': { paddingTop: spacing[5] },
+    'pt-6': { paddingTop: spacing[6] },
+    'pt-7': { paddingTop: spacing[7] },
+    'pt-8': { paddingTop: spacing[8] },
+    'pt-9': { paddingTop: spacing[9] },
+    'pt-10': { paddingTop: spacing[10] },
+    'pt-16': { paddingTop: spacing[16] },
+    'pt-12': { paddingTop: spacing[12] },
+
+    // Padding Bottom
+    'pb-0': { paddingBottom: spacing[0] },
+    'pb-1': { paddingBottom: spacing[1] },
+    'pb-2': { paddingBottom: spacing[2] },
+    'pb-3': { paddingBottom: spacing[3] },
+    'pb-4': { paddingBottom: spacing[4] },
+    'pb-5': { paddingBottom: spacing[5] },
+    'pb-6': { paddingBottom: spacing[6] },
+    'pb-7': { paddingBottom: spacing[7] },
+    'pb-8': { paddingBottom: spacing[8] },
+    'pb-9': { paddingBottom: spacing[9] },
+    'pb-10': { paddingBottom: spacing[10] },
+
+    // Padding Left
+    'pl-0': { paddingLeft: spacing[0] },
+    'pl-1': { paddingLeft: spacing[1] },
+    'pl-2': { paddingLeft: spacing[2] },
+    'pl-3': { paddingLeft: spacing[3] },
+    'pl-4': { paddingLeft: spacing[4] },
+    'pl-5': { paddingLeft: spacing[5] },
+    'pl-6': { paddingLeft: spacing[6] },
+    'pl-7': { paddingLeft: spacing[7] },
+    'pl-8': { paddingLeft: spacing[8] },
+    'pl-9': { paddingLeft: spacing[9] },
+    'pl-10': { paddingLeft: spacing[10] },
+
+    // Padding Right
+    'pr-0': { paddingRight: spacing[0] },
+    'pr-1': { paddingRight: spacing[1] },
+    'pr-2': { paddingRight: spacing[2] },
+    'pr-3': { paddingRight: spacing[3] },
+    'pr-4': { paddingRight: spacing[4] },
+    'pr-5': { paddingRight: spacing[5] },
+    'pr-6': { paddingRight: spacing[6] },
+    'pr-7': { paddingRight: spacing[7] },
+    'pr-8': { paddingRight: spacing[8] },
+    'pr-9': { paddingRight: spacing[9] },
+    'pr-10': { paddingRight: spacing[10] },
+
+    // Padding Horizontal
+    'px-0': { paddingHorizontal: spacing[0] },
+    'px-0.5': { paddingHorizontal: spacing['0.5'] },
+    'px-1': { paddingHorizontal: spacing[1] },
+    'px-2': { paddingHorizontal: spacing[2] },
+    'px-3': { paddingHorizontal: spacing[3] },
+    'px-4': { paddingHorizontal: spacing[4] },
+    'px-5': { paddingHorizontal: spacing[5] },
+    'px-6': { paddingHorizontal: spacing[6] },
+    'px-7': { paddingHorizontal: spacing[7] },
+    'px-8': { paddingHorizontal: spacing[8] },
+    'px-9': { paddingHorizontal: spacing[9] },
+    'px-10': { paddingHorizontal: spacing[10] },
+
+    // Padding Vertical
+    'py-0': { paddingVertical: spacing[0] },
+    'py-0.5': { paddingVertical: spacing['0.5'] },
+    'py-1': { paddingVertical: spacing[1] },
+    'py-2': { paddingVertical: spacing[2] },
+    'py-3': { paddingVertical: spacing[3] },
+    'py-4': { paddingVertical: spacing[4] },
+    'py-5': { paddingVertical: spacing[5] },
+    'py-6': { paddingVertical: spacing[6] },
+    'py-7': { paddingVertical: spacing[7] },
+    'py-8': { paddingVertical: spacing[8] },
+    'py-9': { paddingVertical: spacing[9] },
+    'py-10': { paddingVertical: spacing[10] },
+
+    // border-radius
+    'br-50p': { borderRadius: 50 },
+    'br-4': { borderRadius: 4 },
+    'br-8': { borderRadius: 8 },
+    'br-12': { borderRadius: 12 },
+    'br-16': { borderRadius: 16 },
+    'br-20': { borderRadius: 20 },
+
+    // z-index
+    'z-0': { zIndex: 0 },
+    'z-1': { zIndex: 1 },
+    'z-2': { zIndex: 2 },
+    'z-5': { zIndex: 5 },
+    'z-10': { zIndex: 10 },
+    'z-100': { zIndex: 100 },
+
+    // colors
+    'bg-neutral-100': { backgroundColor: '#ffffff' },
+
+    // positions
+    'p-relative': { position: 'relative' as const },
+    'p-absolute': { position: 'absolute' as const },
+
+    // shadow
+    'bs-shadow-top-white': {
+      shadowColor: '#1a1a1a',
+      shadowOffset: { width: 0, height: -4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 16,
+      elevation: 5,
+    },
+    'bs-shadow-bottom-white': {
+      shadowColor: '#1a1a1a',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 16,
+      elevation: 5,
+    },
+
+    // overflow
+    'o-hidden': {
+      overflow: 'hidden' as const,
+    },
+
+    // text align
+    'ta-c': {
+      textAlign: 'center' as const,
+    },
+
+    'ta-l': {
+      textAlign: 'left' as const,
+    },
+
+    'ta-r': {
+      textAlign: 'right' as const,
+    },
+  };
+});

package/src/index.ts

@@ -4,3 +4,4 @@ import makeStyles from './makeStyles';
 import useNativeMergeStyles from './useNativeMergeStyles';
 
 export { useStyles, useWebMergeStyles, makeStyles, useNativeMergeStyles };
+export { gs } from './globalLayoutStyles/gs';

package/src/makeStyles/index.native.ts

@@ -1,11 +1,12 @@
+import { NamedStyles } from '@cleartrip/ct-design-types';
 import { StyleSheet } from 'react-native';
 import { ThemeManager } from '@cleartrip/ct-design-theme';
 import { Theme as ThemeType } from '@cleartrip/ct-design-theme';
 
 function makeStyles<T extends StyleSheet.NamedStyles<T>>(
-  styleFactory: (theme: ThemeType) => T | StyleSheet.NamedStyles<T>,
+  styleFactory: (theme: ThemeType) => T | NamedStyles<T> | NamedStyles<unknown>,
   customTheme?: ThemeType,
-): T | StyleSheet.NamedStyles<T> {
+): T | NamedStyles<T> | NamedStyles<unknown> {
   /**
    * Get the current theme.
    */
@@ -34,10 +35,9 @@ function makeStyles<T extends StyleSheet.NamedStyles<T>>(
     styles as unknown as { [s: string]: (theme: ThemeType) => unknown },
   )) {
     const updatedValue = typeof value === 'function' ? value(theme) : value;
-    styles[key as keyof T] = updatedValue as (T | StyleSheet.NamedStyles<T>)[keyof T];
+    styles[key] = updatedValue;
   }
 
-  // @ts-ignore
   return StyleSheet.create(styles);
 }
 

package/src/makeStyles/index.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { css } from '@emotion/css';
 import { ThemeManager, Theme as ThemeType } from '@cleartrip/ct-design-theme';
-import type { NamedStyles } from '@cleartrip/ct-design-types';
+import { NamedStyles } from '@cleartrip/ct-design-types';
 import preprocess from './preprocess';
 import { validate } from './validate';
 
 function makeStyles<T extends NamedStyles<T>>(
-  styleFactory: (theme: ThemeType) => T | NamedStyles<T>,
+  styleFactory: (theme: ThemeType) => T | NamedStyles<T> | NamedStyles<unknown>,
   customTheme?: ThemeType,
 ): T {
   /**
@@ -36,7 +36,7 @@ function makeStyles<T extends NamedStyles<T>>(
   for (const [key, value] of Object.entries<unknown | ((theme: ThemeType) => unknown)>(styles)) {
     const updatedValue = typeof value === 'function' ? value(theme) : value;
 
-    styles[key as keyof T] = updatedValue;
+    styles[key] = updatedValue;
   }
 
   /**

package/src/useNativeMergeStyles/index.native.ts

@@ -14,7 +14,7 @@ function useNativeMergeStyles<T extends ViewStyle | ImageStyle | TextStyle>(
   deps: DependencyList,
 ): StyleProp<T> {
   return useStableMemo(() => {
-    if (getStyles<T>(styles)) {
+    if (getStyles<T>(styles.filter(Boolean))) {
       return StyleSheet.compose(null, styles);
     }
   }, deps);

package/src/useStyles/index.ts

@@ -8,13 +8,13 @@ import useStableMemo from '../useStableMemo';
 import makeStyles from '../makeStyles';
 
 function useStyles<T extends NamedStyles<T>>(
-  styleFactory: (theme: ThemeType) => T | NamedStyles<T>,
+  styleFactory: (theme: ThemeType) => T | NamedStyles<T> | NamedStyles<unknown>,
   dep: DependencyList,
 ): T {
   const theme = useTheme();
 
   return useStableMemo(() => {
-    const adaptedFactory = (providedTheme: ThemeType): T | NamedStyles<T> => {
+    const adaptedFactory = (providedTheme: ThemeType): T | NamedStyles<T> | NamedStyles<unknown> => {
       return styleFactory(providedTheme);
     };
     return makeStyles(adaptedFactory, theme);

package/src/useWebMergeStyles/index.ts

@@ -16,7 +16,7 @@ import preprocess from '../makeStyles/preprocess';
 const useWebMergeStyles = <T extends Styles | string>(styles: T[], deps: DependencyList) => {
   return useStableMemo(() => {
     const classes: string[] = [];
-    styles.forEach((style) => {
+    styles.filter(Boolean).forEach((style) => {
       if (typeof style === 'string') {
         classes.push(style);
       } else {

package/dist/StylingCache/index.d.ts

@@ -1,13 +0,0 @@
-import { Styles } from '@cleartrip/ct-design-types';
-type NeverString<T> = T extends string ? never : T;
-type WeakStyle = NeverString<Styles>;
-declare class StylingCacheManager {
-    static instance: StylingCacheManager;
-    private cache;
-    constructor();
-    set(key: WeakStyle, value: string): void;
-    get(key: WeakStyle): string | undefined;
-}
-declare const StylingCache: Readonly<StylingCacheManager>;
-export default StylingCache;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StylingCache/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;AAEnD,KAAK,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAErC,cAAM,mBAAmB;IACvB,MAAM,CAAC,QAAQ,EAAE,mBAAmB,CAAC;IACrC,OAAO,CAAC,KAAK,CAA6B;;IAgB1C,GAAG,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM;IASjC,GAAG,CAAC,GAAG,EAAE,SAAS;CAGnB;AAED,QAAA,MAAM,YAAY,+BAA2C,CAAC;AAC9D,eAAe,YAAY,CAAC"}

package/src/StylingCache/index.ts

@@ -1,40 +0,0 @@
-import { Styles } from '@cleartrip/ct-design-types';
-
-type NeverString<T> = T extends string ? never : T;
-
-type WeakStyle = NeverString<Styles>;
-
-class StylingCacheManager {
-  static instance: StylingCacheManager;
-  private cache: WeakMap<WeakStyle, string>;
-
-  constructor() {
-    if (StylingCacheManager.instance) {
-      throw new Error('You can only create one instance!');
-    }
-    StylingCacheManager.instance = this;
-    this.cache = new WeakMap();
-  }
-
-  /**
-   *
-   * @param key Key is primarily the page name or any unique string
-   * @param value Value is the slot node index and it corresponding height
-   * @description This method is used to set new cache or replace the entire existing cache key
-   */
-  set(key: WeakStyle, value: string) {
-    this.cache.set(key, value);
-  }
-
-  /**
-   *
-   * @param key Key is primarily the page name or any unique string
-   * @returns This method returns the cache data if the cache exists or undefined if it does not
-   */
-  get(key: WeakStyle) {
-    return this.cache.get(key);
-  }
-}
-
-const StylingCache = Object.freeze(new StylingCacheManager());
-export default StylingCache;