@cleartrip/ct-design-style-manager 4.0.0-TEST.1 → 5.0.0

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

@@ -3,14 +3,15 @@
 var ctDesignTheme = require('@cleartrip/ct-design-theme');
 var react = require('react');
 var css = require('@emotion/css');
+require('@react-native/normalize-colors');
 var valueParser = require('postcss-value-parser');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var valueParser__default = /*#__PURE__*/_interopDefault(valueParser);
 
-var useStableMemo = function (callback, deps) {
-    return react.useMemo(function () {
+const useStableMemo = (callback, deps) => {
+    return react.useMemo(() => {
         return callback();
     }, deps);
 };
@@ -20,17 +21,17 @@ function normalizeColor(color) {
         return color;
     }
 }
-var isWebColor = function (color) {
+const isWebColor = (color) => {
     return color === 'currentcolor' || color === 'currentColor' || color === 'inherit' || color.indexOf('var(') === 0;
 };
-var normalizeColorWrapper = function (color, opacity) {
+const normalizeColorWrapper = (color, opacity = 1) => {
     if (color == null)
         return;
     if (typeof color === 'string' && isWebColor(color)) {
         return color;
     }
 };
-var colorProps = {
+const colorProps = {
     backgroundColor: true,
     borderColor: true,
     borderTopColor: true,
@@ -42,7 +43,7 @@ var colorProps = {
     textDecorationColor: true,
     textShadowColor: true,
 };
-var unitlessNumbers = {
+const unitlessNumbers = {
     animationIterationCount: true,
     aspectRatio: true,
     borderImageOutset: true,
@@ -90,16 +91,16 @@ var unitlessNumbers = {
     shadowOpacity: true,
 };
 function normalizeValueWithProperty(value, property) {
-    var returnValue = value;
+    let returnValue = value;
     if ((property == null || !unitlessNumbers[property]) && typeof value === 'number') {
-        returnValue = "".concat(value, "px");
+        returnValue = `${value}px`;
     }
     else if (property != null && colorProps[property]) {
         returnValue = normalizeColor(value);
     }
     return returnValue;
 }
-var warnedKeys = {};
+const warnedKeys = {};
 function warnOnce(key, message) {
     if (process.env.NODE_ENV !== 'production') {
         if (warnedKeys[key]) {
@@ -109,50 +110,50 @@ function warnOnce(key, message) {
         warnedKeys[key] = true;
     }
 }
-var emptyObject = {};
-var defaultOffset = { height: 0, width: 0 };
-var createBoxShadowValue = function (style) {
-    var shadowColor = style.shadowColor, shadowOffset = style.shadowOffset; style.shadowOpacity; var shadowRadius = style.shadowRadius;
-    var _a = shadowOffset || defaultOffset, height = _a.height, width = _a.width;
-    var offsetX = normalizeValueWithProperty(width);
-    var offsetY = normalizeValueWithProperty(height);
-    var blurRadius = normalizeValueWithProperty(shadowRadius || 0);
-    var color = normalizeColorWrapper(shadowColor || 'black');
+const emptyObject = {};
+const defaultOffset = { height: 0, width: 0 };
+const createBoxShadowValue = (style) => {
+    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+    const { height, width } = shadowOffset || defaultOffset;
+    const offsetX = normalizeValueWithProperty(width);
+    const offsetY = normalizeValueWithProperty(height);
+    const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
+    const color = normalizeColorWrapper(shadowColor || 'black', shadowOpacity);
     if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
-        return "".concat(offsetX, " ").concat(offsetY, " ").concat(blurRadius, " ").concat(color);
+        return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
     }
 };
-var createTextShadowValue = function (style) {
-    var textShadowColor = style.textShadowColor, textShadowOffset = style.textShadowOffset, textShadowRadius = style.textShadowRadius;
-    var _a = textShadowOffset || defaultOffset, height = _a.height, width = _a.width;
-    var radius = textShadowRadius || 0;
-    var offsetX = normalizeValueWithProperty(width);
-    var offsetY = normalizeValueWithProperty(height);
-    var blurRadius = normalizeValueWithProperty(radius);
-    var color = normalizeValueWithProperty(textShadowColor, 'textShadowColor');
+const createTextShadowValue = (style) => {
+    const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+    const { height, width } = textShadowOffset || defaultOffset;
+    const radius = textShadowRadius || 0;
+    const offsetX = normalizeValueWithProperty(width);
+    const offsetY = normalizeValueWithProperty(height);
+    const blurRadius = normalizeValueWithProperty(radius);
+    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor');
     if (color &&
         (height !== 0 || width !== 0 || radius !== 0) &&
         offsetX != null &&
         offsetY != null &&
         blurRadius != null) {
-        return "".concat(offsetX, " ").concat(offsetY, " ").concat(blurRadius, " ").concat(color);
+        return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
     }
 };
-var mapTransform = function (transform) {
-    var type = Object.keys(transform)[0];
-    var value = transform[type];
+const mapTransform = (transform) => {
+    const type = Object.keys(transform)[0];
+    const value = transform[type];
     if (type === 'matrix' || type === 'matrix3d') {
-        return "".concat(type, "(").concat(value.join(','), ")");
+        return `${type}(${value.join(',')})`;
     }
     else {
-        var normalizedValue = normalizeValueWithProperty(value, type);
-        return "".concat(type, "(").concat(normalizedValue, ")");
+        const normalizedValue = normalizeValueWithProperty(value, type);
+        return `${type}(${normalizedValue})`;
     }
 };
-var createTransformValue = function (value) {
+const createTransformValue = (value) => {
     return value.map(mapTransform).join(' ');
 };
-var PROPERTIES_STANDARD = {
+const PROPERTIES_STANDARD = {
     borderBottomEndRadius: 'borderEndEndRadius',
     borderBottomStartRadius: 'borderEndStartRadius',
     borderTopEndRadius: 'borderStartEndRadius',
@@ -174,41 +175,40 @@ var PROPERTIES_STANDARD = {
     paddingVertical: 'paddingBlock',
     start: 'insetInlineStart',
 };
-var ignoredProps = {
+const ignoredProps = {
     elevation: true,
     overlayColor: true,
     resizeMode: true,
     tintColor: true,
 };
-var preprocess = function (originalStyle, options) {
-    if (options === void 0) { options = {}; }
-    var style = originalStyle || emptyObject;
-    var nextStyle = {};
+const preprocess = (originalStyle, options = {}) => {
+    const style = originalStyle || emptyObject;
+    const nextStyle = {};
     if ((options.shadow === true,
         style.shadowColor != null ||
             style.shadowOffset != null ||
             style.shadowOpacity != null ||
             style.shadowRadius != null)) {
-        warnOnce('shadowStyles', "\"shadow*\" style props are deprecated. Use \"boxShadow\".");
-        var boxShadowValue = createBoxShadowValue(style);
+        warnOnce('shadowStyles', `"shadow*" style props are deprecated. Use "boxShadow".`);
+        const boxShadowValue = createBoxShadowValue(style);
         if (boxShadowValue != null && nextStyle.boxShadow == null) {
-            var boxShadow = style.boxShadow;
-            var value = boxShadow ? "".concat(boxShadow, ", ").concat(boxShadowValue) : boxShadowValue;
+            const { boxShadow } = style;
+            const value = boxShadow ? `${boxShadow}, ${boxShadowValue}` : boxShadowValue;
             nextStyle.boxShadow = value;
         }
     }
     if ((options.textShadow === true && style.textShadowColor != null) ||
         style.textShadowOffset != null ||
         style.textShadowRadius != null) {
-        warnOnce('textShadowStyles', "\"textShadow*\" style props are deprecated. Use \"textShadow\".");
-        var textShadowValue = createTextShadowValue(style);
+        warnOnce('textShadowStyles', `"textShadow*" style props are deprecated. Use "textShadow".`);
+        const textShadowValue = createTextShadowValue(style);
         if (textShadowValue != null && nextStyle.textShadow == null) {
-            var textShadow = style.textShadow;
-            var value = textShadow ? "".concat(textShadow, ", ").concat(textShadowValue) : textShadowValue;
+            const { textShadow } = style;
+            const value = textShadow ? `${textShadow}, ${textShadowValue}` : textShadowValue;
             nextStyle.textShadow = value;
         }
     }
-    for (var originalProp in style) {
+    for (const originalProp in style) {
         if (ignoredProps[originalProp] != null ||
             originalProp === 'shadowColor' ||
             originalProp === 'shadowOffset' ||
@@ -219,9 +219,9 @@ var preprocess = function (originalStyle, options) {
             originalProp === 'textShadowRadius') {
             continue;
         }
-        var originalValue = style[originalProp];
-        var prop = PROPERTIES_STANDARD[originalProp] || originalProp;
-        var value = originalValue;
+        const originalValue = style[originalProp];
+        const prop = PROPERTIES_STANDARD[originalProp] || originalProp;
+        let value = originalValue;
         if (!Object.prototype.hasOwnProperty.call(style, originalProp) || (prop !== originalProp && style[prop] != null)) {
             continue;
         }
@@ -252,7 +252,7 @@ var preprocess = function (originalStyle, options) {
     return nextStyle;
 };
 
-var invalidShortforms = {
+const invalidShortforms = {
     background: true,
     borderBottom: true,
     borderLeft: true,
@@ -263,7 +263,7 @@ var invalidShortforms = {
     outline: true,
     textDecoration: true,
 };
-var invalidMultiValueShortforms = {
+const invalidMultiValueShortforms = {
     flex: true,
     margin: true,
     padding: true,
@@ -290,19 +290,19 @@ function error(message) {
     console.error(message);
 }
 function validate(obj) {
-    for (var k in obj) {
-        var prop = k.trim();
-        var value = obj[prop];
-        var isInvalid = false;
+    for (const k in obj) {
+        const prop = k.trim();
+        const value = obj[prop];
+        let isInvalid = false;
         if (value === null) {
             continue;
         }
         if (typeof value === 'string' && value.indexOf('!important') > -1) {
-            error("Invalid style declaration \"".concat(prop, ":").concat(value, "\". Values cannot include \"!important\""));
+            error(`Invalid style declaration "${prop}:${value}". Values cannot include "!important"`);
             isInvalid = true;
         }
         else {
-            var suggestion = '';
+            let suggestion = '';
             if (prop === 'animation' || prop === 'animationName') {
                 suggestion = 'Did you mean "animationKeyframes"?';
                 isInvalid = true;
@@ -317,12 +317,12 @@ function validate(obj) {
             }
             else if (invalidMultiValueShortforms[prop]) {
                 if (typeof value === 'string' && valueParser__default.default(value).nodes.length > 1) {
-                    suggestion = "Value is \"".concat(value, "\" but only single values are supported.");
+                    suggestion = `Value is "${value}" but only single values are supported.`;
                     isInvalid = true;
                 }
             }
             if (suggestion !== '') {
-                error("Invalid style property of \"".concat(prop, "\". ").concat(suggestion));
+                error(`Invalid style property of "${prop}". ${suggestion}`);
             }
         }
         if (isInvalid) {
@@ -331,73 +331,46 @@ function validate(obj) {
     }
 }
 
-var makeStyles = function (styleFactory, customTheme) {
-    var theme = customTheme || ctDesignTheme.ThemeManager.get();
-    var styles = styleFactory(theme);
-    for (var _i = 0, _a = Object.entries(styles); _i < _a.length; _i++) {
-        var _b = _a[_i], key = _b[0], value = _b[1];
-        var updatedValue = typeof value === 'function' ? value(theme) : value;
+function makeStyles(styleFactory, customTheme) {
+    const theme = customTheme || ctDesignTheme.ThemeManager.get();
+    const styles = styleFactory(theme);
+    for (const [key, value] of Object.entries(styles)) {
+        const updatedValue = typeof value === 'function' ? value(theme) : value;
         styles[key] = updatedValue;
     }
-    var classes = {};
-    for (var _c = 0, _d = Object.entries(styles); _c < _d.length; _c++) {
-        var _e = _d[_c], key = _e[0], value = _e[1];
-        var defaultPreprocessOptions = { shadow: true, textShadow: true };
+    const classes = {};
+    for (const [key, value] of Object.entries(styles)) {
+        const defaultPreprocessOptions = { shadow: true, textShadow: true };
         validate(value);
-        var updatedStyle = preprocess(value, defaultPreprocessOptions);
+        const updatedStyle = preprocess(value, defaultPreprocessOptions);
         classes[key] = css.css(updatedStyle);
     }
     return classes;
-};
+}
 
-var useStyles = function (styleFactory, dep) {
-    var theme = ctDesignTheme.useTheme();
-    return useStableMemo(function () {
-        var adaptedFactory = function (providedTheme) {
+function useStyles(styleFactory, dep) {
+    const theme = ctDesignTheme.useTheme();
+    return useStableMemo(() => {
+        const adaptedFactory = (providedTheme) => {
             return styleFactory(providedTheme);
         };
         return makeStyles(adaptedFactory, theme);
     }, dep);
-};
-
-var StylingCacheManager = (function () {
-    function StylingCacheManager() {
-        if (StylingCacheManager.instance) {
-            throw new Error('You can only create one instance!');
-        }
-        StylingCacheManager.instance = this;
-        this.cache = new WeakMap();
-    }
-    StylingCacheManager.prototype.set = function (key, value) {
-        this.cache.set(key, value);
-    };
-    StylingCacheManager.prototype.get = function (key) {
-        return this.cache.get(key);
-    };
-    return StylingCacheManager;
-}());
-var StylingCache = Object.freeze(new StylingCacheManager());
+}
 
-var useWebMergeStyles = function (styles, deps) {
-    return useStableMemo(function () {
-        var classes = [];
-        styles.forEach(function (style) {
+const useWebMergeStyles = (styles, deps) => {
+    return useStableMemo(() => {
+        const classes = [];
+        styles.filter(Boolean).forEach((style) => {
             if (typeof style === 'string') {
                 classes.push(style);
             }
             else {
                 if (style) {
-                    var _style = StylingCache.get(style);
-                    if (_style) {
-                        classes.push(_style);
-                    }
-                    else {
-                        var defaultPreprocessOptions = { shadow: true, textShadow: true };
-                        var preprocessedStyle = preprocess(style, defaultPreprocessOptions);
-                        var emotionClass = css.css(preprocessedStyle);
-                        StylingCache.set(style, emotionClass);
-                        classes.push(emotionClass);
-                    }
+                    const defaultPreprocessOptions = { shadow: true, textShadow: true };
+                    const preprocessedStyle = preprocess(style, defaultPreprocessOptions);
+                    const emotionClass = css.css(preprocessedStyle);
+                    classes.push(emotionClass);
                 }
             }
         });
@@ -405,7 +378,330 @@ var useWebMergeStyles = function (styles, deps) {
     }, deps);
 };
 
+const getStyles = (styles) => {
+    return Array.isArray(styles) && styles.every((style) => typeof style !== 'string');
+};
+function useNativeMergeStyles(styles, deps) {
+    return useStableMemo(() => {
+        if (getStyles(styles)) {
+            return null;
+        }
+    }, deps);
+}
+
+const gs = makeStyles((theme) => {
+    const { spacing } = theme;
+    return {
+        flex: { display: 'flex' },
+        'flex-1': { flex: 1 },
+        'flex-row': { flexDirection: 'row' },
+        'flex-column': { flexDirection: 'column' },
+        'flex-row-reverse': { flexDirection: 'row-reverse' },
+        'flex-column-reverse': { flexDirection: 'column-reverse' },
+        'fw-400': { fontWeight: '400' },
+        'fw-500': { fontWeight: '500' },
+        'fw-600': { fontWeight: '600' },
+        'flex-nowrap': { flexWrap: 'nowrap' },
+        'flex-wrap': { flexWrap: 'wrap' },
+        'flex-wrap-reverse': { flexWrap: 'wrap-reverse' },
+        'flex-no-shrink': { flexShrink: spacing[0] },
+        'flex-stretch': { alignItems: 'stretch' },
+        'flex-top': { alignItems: 'flex-start' },
+        'flex-middle': { alignItems: 'center' },
+        'flex-bottom': { alignItems: 'flex-end' },
+        'flex-baseline': { alignItems: 'baseline' },
+        'flex-wrap-stretch': { alignContent: 'stretch' },
+        'flex-wrap-top': { alignContent: 'flex-start' },
+        'flex-wrap-middle': { alignContent: 'center' },
+        'flex-wrap-bottom': { alignContent: 'flex-end' },
+        'flex-wrap-between': { alignContent: 'space-between' },
+        'flex-wrap-around': { alignContent: 'space-around' },
+        'flex-left': { justifyContent: 'flex-start' },
+        'flex-start': { justifyContent: 'flex-start' },
+        'flex-end': { justifyContent: 'flex-end' },
+        'flex-right': { justifyContent: 'flex-end' },
+        'flex-center': { justifyContent: 'center' },
+        'flex-between': { justifyContent: 'space-between' },
+        'flex-around': { justifyContent: 'space-around' },
+        'flex-basis-auto': { flexBasis: 'auto' },
+        '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] },
+        '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] },
+        '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] },
+        'w-0p': { width: '0%' },
+        'w-10p': { width: '10%' },
+        'w-20p': { width: '20%' },
+        'w-30p': { width: '30%' },
+        'w-40p': { width: '40%' },
+        'w-50p': { width: '50%' },
+        'w-60p': { width: '60%' },
+        'w-70p': { width: '70%' },
+        'w-80p': { width: '80%' },
+        'w-90p': { width: '90%' },
+        'w-100p': { width: '100%' },
+        '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] },
+        't-0': { top: 0 },
+        'b-0': { bottom: 0 },
+        'l-0': { left: 0 },
+        'h-0p': { height: '0%' },
+        'h-10p': { height: '10%' },
+        'h-20p': { height: '20%' },
+        'h-30p': { height: '30%' },
+        'h-40p': { height: '40%' },
+        'h-50p': { height: '50%' },
+        'h-60p': { height: '60%' },
+        'h-70p': { height: '70%' },
+        'h-80p': { height: '80%' },
+        'h-90p': { height: '90%' },
+        'h-100p': { height: '100%' },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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] },
+        '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-0': { zIndex: 0 },
+        'z-1': { zIndex: 1 },
+        'z-2': { zIndex: 2 },
+        'z-5': { zIndex: 5 },
+        'z-10': { zIndex: 10 },
+        'z-100': { zIndex: 100 },
+        'bg-neutral-100': { backgroundColor: '#ffffff' },
+        'p-relative': { position: 'relative' },
+        'p-absolute': { position: 'absolute' },
+        '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,
+        },
+        'o-hidden': {
+            overflow: 'hidden',
+        },
+        'ta-c': {
+            textAlign: 'center',
+        },
+        'ta-l': {
+            textAlign: 'left',
+        },
+        'ta-r': {
+            textAlign: 'right',
+        },
+    };
+});
+
+exports.gs = gs;
 exports.makeStyles = makeStyles;
+exports.useNativeMergeStyles = useNativeMergeStyles;
 exports.useStyles = useStyles;
 exports.useWebMergeStyles = useWebMergeStyles;
 //# sourceMappingURL=ct-design-styleManager.cjs.js.map