@0610studio/zs-ui 0.18.0 → 0.18.1

package/build/overlay/SnackbarNotify/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { StyleSheet, View } from "react-native";
 import SnackbarItem from "./ui/SnackbarItem";
@@ -7,10 +8,10 @@ import { Z_INDEX_VALUE } from "../../model/utils";
 const SnackbarNotify = ({ customSnackbar }) => {
     const { snackItemStack, hideSnackBar } = useSnackbar();
     const { top } = useSafeAreaInsets();
-    // ----------------------------------------------------------------
-    if (!snackItemStack)
+    const containerStyle = useMemo(() => [styles.container, { paddingTop: top }], [top]);
+    if (!snackItemStack?.length)
         return null;
-    return (_jsx(View, { style: [styles.container, { paddingTop: top }], children: snackItemStack.map((snackItem) => {
+    return (_jsx(View, { style: containerStyle, children: snackItemStack.map((snackItem) => {
             return (_jsx(SnackbarItem, { customSnackbar: customSnackbar, snackItem: snackItem, hideSnackBar: hideSnackBar }, snackItem.index));
         }) }));
 };
@@ -22,5 +23,5 @@ const styles = StyleSheet.create({
         position: 'absolute',
     },
 });
-export default SnackbarNotify;
+export default memo(SnackbarNotify);
 //# sourceMappingURL=index.js.map

package/build/overlay/SnackbarNotify/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/SnackbarNotify/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EAGf,EAAE,EAAE;IACH,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,WAAW,EAAE,CAAC;IACvD,MAAM,EAAE,GAAG,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEpC,mEAAmE;IAEnE,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,YAEhD,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,OAAO,CACL,KAAC,YAAY,IAEX,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,IAHrB,SAAS,CAAC,KAAK,CAIpB,CACH,CAAC;QACJ,CAAC,CAAC,GAEC,CACR,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,MAAM,EAAE,aAAa,CAAC,QAAQ;QAC9B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import React, { ReactNode } from \"react\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { StyleSheet, View } from \"react-native\";\nimport { CustomSnackbarProps } from \"../../model/types\";\nimport SnackbarItem from \"./ui/SnackbarItem\";\nimport { useSnackbar } from \"../../model/useOverlay\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nconst SnackbarNotify = ({\n  customSnackbar\n}: {\n  customSnackbar?: (props: CustomSnackbarProps) => ReactNode\n}) => {\n  const { snackItemStack, hideSnackBar } = useSnackbar();\n  const { top } = useSafeAreaInsets();\n\n  // ----------------------------------------------------------------\n\n  if (!snackItemStack) return null;\n\n  return (\n    <View style={[styles.container, { paddingTop: top }]}>\n      {\n        snackItemStack.map((snackItem) => {\n          return (\n            <SnackbarItem\n              key={snackItem.index}\n              customSnackbar={customSnackbar}\n              snackItem={snackItem}\n              hideSnackBar={hideSnackBar}\n            />\n          );\n        })\n      }\n    </View>\n  )\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: Z_INDEX_VALUE.SNACKBAR,\n    width: '100%',\n    alignItems: 'center',\n    position: 'absolute',\n  },\n});\n\nexport default SnackbarNotify;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/SnackbarNotify/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EAGf,EAAE,EAAE;IACH,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,WAAW,EAAE,CAAC;IACvD,MAAM,EAAE,GAAG,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAErF,IAAI,CAAC,cAAc,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzC,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,cAAc,YAEvB,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,OAAO,CACL,KAAC,YAAY,IAEX,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,IAHrB,SAAS,CAAC,KAAK,CAIpB,CACH,CAAC;QACJ,CAAC,CAAC,GAEC,CACR,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,MAAM,EAAE,aAAa,CAAC,QAAQ;QAC9B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React, { ReactNode, memo, useMemo } from \"react\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { StyleSheet, View } from \"react-native\";\nimport { CustomSnackbarProps } from \"../../model/types\";\nimport SnackbarItem from \"./ui/SnackbarItem\";\nimport { useSnackbar } from \"../../model/useOverlay\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nconst SnackbarNotify = ({\n  customSnackbar\n}: {\n  customSnackbar?: (props: CustomSnackbarProps) => ReactNode\n}) => {\n  const { snackItemStack, hideSnackBar } = useSnackbar();\n  const { top } = useSafeAreaInsets();\n  const containerStyle = useMemo(() => [styles.container, { paddingTop: top }], [top]);\n\n  if (!snackItemStack?.length) return null;\n\n  return (\n    <View style={containerStyle}>\n      {\n        snackItemStack.map((snackItem) => {\n          return (\n            <SnackbarItem\n              key={snackItem.index}\n              customSnackbar={customSnackbar}\n              snackItem={snackItem}\n              hideSnackBar={hideSnackBar}\n            />\n          );\n        })\n      }\n    </View>\n  )\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: Z_INDEX_VALUE.SNACKBAR,\n    width: '100%',\n    alignItems: 'center',\n    position: 'absolute',\n  },\n});\n\nexport default memo(SnackbarNotify);\n"]}

package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { CustomSnackbarProps, SnackItem } from "../../../model/types";
-declare const Snackbar: ({ customSnackbar, snackItem, hideSnackBar, }: {
+declare const _default: React.MemoExoticComponent<({ customSnackbar, snackItem, hideSnackBar, }: {
     customSnackbar?: (props: CustomSnackbarProps) => ReactNode;
     snackItem: SnackItem;
     hideSnackBar: (index: number) => void;
-}) => React.JSX.Element;
-export default Snackbar;
+}) => React.JSX.Element>;
+export default _default;
 //# sourceMappingURL=SnackbarItem.d.ts.map

package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtE,QAAA,MAAM,QAAQ,GAAI,8CAIf;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,sBAyCA,CAAC;AA0BF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgC,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;iGASnE;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAoED,wBAA8B"}

package/build/overlay/SnackbarNotify/ui/SnackbarItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useCallback } from "react";
+import { memo, useEffect, useCallback } from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
-import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
+import Animated, { FadeInUp, FadeOutUp, LinearTransition } from "react-native-reanimated";
 import ViewAtom from "../../../ui/atoms/ViewAtom";
 import { useTheme } from "../../../context/ThemeContext";
 import ZSText from "../../../ui/ZSText";
@@ -14,8 +14,8 @@ const Snackbar = ({ customSnackbar, snackItem, hideSnackBar, }) => {
     useEffect(() => {
         const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);
         return () => clearTimeout(closeTimeout);
-    }, []);
-    return (_jsx(Animated.View, { style: [styles.snackbarWrapper], entering: FadeInUp, exiting: FadeOutUp, children: _jsx(TouchableOpacity, { style: [styles.container], activeOpacity: 1, onPress: closeSnackbar, children: customSnackbar ? (customSnackbar({ snackType: type, snackMessage: message })) : (_jsx(ViewAtom, { style: [
+    }, [closeSnackbar, snackbarDuration]);
+    return (_jsx(Animated.View, { style: [styles.snackbarWrapper], entering: FadeInUp.duration(250), exiting: FadeOutUp.duration(250), layout: LinearTransition.duration(250), children: _jsx(TouchableOpacity, { style: [styles.container], activeOpacity: 1, onPress: closeSnackbar, children: customSnackbar ? (customSnackbar({ snackType: type, snackMessage: message })) : (_jsx(ViewAtom, { style: [
                     styles.snackBar,
                     { backgroundColor: type === "error" ? palette.background.danger : palette.background.success },
                 ], children: _jsx(ViewAtom, { style: styles.messageContainer, children: _jsx(ZSText, { children: message }) }) })) }) }));
@@ -43,5 +43,5 @@ const styles = StyleSheet.create({
         marginLeft: 10,
     },
 });
-export default Snackbar;
+export default memo(Snackbar);
 //# sourceMappingURL=SnackbarItem.js.map

package/build/overlay/SnackbarNotify/ui/SnackbarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,QAAQ,GAAG,CAAC,EAChB,cAAc,EACd,SAAS,EACT,YAAY,GAKb,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACtD,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,UAAU,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;QACjE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,EAC/B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,SAAS,YAElB,KAAC,gBAAgB,IACf,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EACzB,aAAa,EAAE,CAAC,EAChB,OAAO,EAAE,aAAa,YAErB,cAAc,CAAC,CAAC,CAAC,CAChB,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAC3D,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IACP,KAAK,EAAE;oBACL,MAAM,CAAC,QAAQ;oBACf,EAAE,eAAe,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE;iBAC/F,YAED,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,YACtC,KAAC,MAAM,cAAE,OAAO,GAAU,GACjB,GACF,CACZ,GACgB,GACL,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,YAAY,EAAE,EAAE;QAChB,KAAK,EAAE,MAAM;KACd;IACD,eAAe,EAAE;QACf,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,CAAC;KACb;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAM;KACd;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,EAAE;KACf;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import React, { ReactNode, useEffect, useCallback } from \"react\";\nimport { StyleSheet, TouchableOpacity } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { CustomSnackbarProps, SnackItem } from \"../../../model/types\";\nimport ViewAtom from \"../../../ui/atoms/ViewAtom\";\nimport { useTheme } from \"../../../context/ThemeContext\";\nimport ZSText from \"../../../ui/ZSText\";\n\nconst Snackbar = ({\n  customSnackbar,\n  snackItem,\n  hideSnackBar,\n}: {\n  customSnackbar?: (props: CustomSnackbarProps) => ReactNode;\n  snackItem: SnackItem;\n  hideSnackBar: (index: number) => void;\n}) => {\n  const { type, message, snackbarDuration } = snackItem;\n  const { palette } = useTheme();\n\n  const closeSnackbar = useCallback(() => {\n    hideSnackBar(snackItem.index);\n  }, [hideSnackBar, snackItem.index]);\n\n  useEffect(() => {\n    const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);\n    return () => clearTimeout(closeTimeout);\n  }, []);\n\n  return (\n    <Animated.View\n      style={[styles.snackbarWrapper]}\n      entering={FadeInUp}\n      exiting={FadeOutUp}\n    >\n      <TouchableOpacity\n        style={[styles.container]}\n        activeOpacity={1}\n        onPress={closeSnackbar}\n      >\n        {customSnackbar ? (\n          customSnackbar({ snackType: type, snackMessage: message })\n        ) : (\n          <ViewAtom\n            style={[\n              styles.snackBar,\n              { backgroundColor: type === \"error\" ? palette.background.danger : palette.background.success },\n            ]}\n          >\n            <ViewAtom style={styles.messageContainer}>\n              <ZSText>{message}</ZSText>\n            </ViewAtom>\n          </ViewAtom>\n        )}\n      </TouchableOpacity>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    borderRadius: 16,\n    width: \"100%\",\n  },\n  snackbarWrapper: {\n    width: \"96%\",\n    marginTop: 8,\n  },\n  snackBar: {\n    borderRadius: 16,\n    paddingHorizontal: 10,\n    paddingVertical: 18,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    width: \"100%\",\n  },\n  messageContainer: {\n    flex: 1,\n    flexDirection: \"column\",\n    marginLeft: 10,\n  },\n});\n\nexport default Snackbar;\n"]}
+{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE1F,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,QAAQ,GAAG,CAAC,EAChB,cAAc,EACd,SAAS,EACT,YAAY,GAKb,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACtD,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,UAAU,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;QACjE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,EAC/B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAChC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,YAEtC,KAAC,gBAAgB,IACf,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EACzB,aAAa,EAAE,CAAC,EAChB,OAAO,EAAE,aAAa,YAErB,cAAc,CAAC,CAAC,CAAC,CAChB,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAC3D,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IACP,KAAK,EAAE;oBACL,MAAM,CAAC,QAAQ;oBACf,EAAE,eAAe,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE;iBAC/F,YAED,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,YACtC,KAAC,MAAM,cAAE,OAAO,GAAU,GACjB,GACF,CACZ,GACgB,GACL,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,YAAY,EAAE,EAAE;QAChB,KAAK,EAAE,MAAM;KACd;IACD,eAAe,EAAE;QACf,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,CAAC;KACb;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAM;KACd;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,EAAE;KACf;CACF,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC,QAAQ,CAAC,CAAC","sourcesContent":["import React, { ReactNode, memo, useEffect, useCallback } from \"react\";\nimport { StyleSheet, TouchableOpacity } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp, LinearTransition } from \"react-native-reanimated\";\nimport { CustomSnackbarProps, SnackItem } from \"../../../model/types\";\nimport ViewAtom from \"../../../ui/atoms/ViewAtom\";\nimport { useTheme } from \"../../../context/ThemeContext\";\nimport ZSText from \"../../../ui/ZSText\";\n\nconst Snackbar = ({\n  customSnackbar,\n  snackItem,\n  hideSnackBar,\n}: {\n  customSnackbar?: (props: CustomSnackbarProps) => ReactNode;\n  snackItem: SnackItem;\n  hideSnackBar: (index: number) => void;\n}) => {\n  const { type, message, snackbarDuration } = snackItem;\n  const { palette } = useTheme();\n\n  const closeSnackbar = useCallback(() => {\n    hideSnackBar(snackItem.index);\n  }, [hideSnackBar, snackItem.index]);\n\n  useEffect(() => {\n    const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);\n    return () => clearTimeout(closeTimeout);\n  }, [closeSnackbar, snackbarDuration]);\n\n  return (\n    <Animated.View\n      style={[styles.snackbarWrapper]}\n      entering={FadeInUp.duration(250)}\n      exiting={FadeOutUp.duration(250)}\n      layout={LinearTransition.duration(250)}\n    >\n      <TouchableOpacity\n        style={[styles.container]}\n        activeOpacity={1}\n        onPress={closeSnackbar}\n      >\n        {customSnackbar ? (\n          customSnackbar({ snackType: type, snackMessage: message })\n        ) : (\n          <ViewAtom\n            style={[\n              styles.snackBar,\n              { backgroundColor: type === \"error\" ? palette.background.danger : palette.background.success },\n            ]}\n          >\n            <ViewAtom style={styles.messageContainer}>\n              <ZSText>{message}</ZSText>\n            </ViewAtom>\n          </ViewAtom>\n        )}\n      </TouchableOpacity>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    borderRadius: 16,\n    width: \"100%\",\n  },\n  snackbarWrapper: {\n    width: \"96%\",\n    marginTop: 8,\n  },\n  snackBar: {\n    borderRadius: 16,\n    paddingHorizontal: 10,\n    paddingVertical: 18,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    width: \"100%\",\n  },\n  messageContainer: {\n    flex: 1,\n    flexDirection: \"column\",\n    marginLeft: 10,\n  },\n});\n\nexport default memo(Snackbar);\n"]}

package/build/overlay/ZSPortal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,SAAS,EAAa,MAAM,OAAO,CAAC;AAWtG,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqCxD,CAAC;AAIF,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqB1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6D,SAAS,EAAa,MAAM,OAAO,CAAC;AAY/G,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwCxD,CAAC;AAcF,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqB1C,CAAC"}

package/build/overlay/ZSPortal/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
 import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
 import { Z_INDEX_VALUE } from '../../model/utils';
 const PortalContext = createContext(null);
@@ -7,7 +8,6 @@ export const PortalProvider = ({ children }) => {
     const [portals, setPortals] = useState(new Map());
     const registerPortal = useCallback((id, element) => {
         setPortals(prev => {
-            // 동일한 요소가 이미 등록되어 있다면 업데이트하지 않음
             if (prev.get(id) === element) {
                 return prev;
             }
@@ -18,7 +18,6 @@ export const PortalProvider = ({ children }) => {
     }, []);
     const unregisterPortal = useCallback((id) => {
         setPortals(prev => {
-            // 해당 ID가 존재하지 않으면 상태를 변경하지 않음
             if (!prev.has(id)) {
                 return prev;
             }
@@ -27,8 +26,20 @@ export const PortalProvider = ({ children }) => {
             return newMap;
         });
     }, []);
-    return (_jsxs(PortalContext.Provider, { value: { registerPortal, unregisterPortal }, children: [children, Array.from(portals.entries()).map(([id, element]) => (_jsx(Animated.View, { entering: FadeInDown, exiting: FadeOutDown, style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none', zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD }, children: element }, id)))] }));
+    const contextValue = useMemo(() => ({ registerPortal, unregisterPortal }), [registerPortal, unregisterPortal]);
+    return (_jsxs(PortalContext.Provider, { value: contextValue, children: [children, Array.from(portals.entries()).map(([id, element]) => (_jsx(Animated.View, { entering: FadeInDown, exiting: FadeOutDown, style: styles.portalLayer, children: element }, id)))] }));
 };
+const styles = StyleSheet.create({
+    portalLayer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: 'box-none',
+        zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,
+    },
+});
 export const ZSPortal = ({ children, isFocused = true }) => {
     const context = useContext(PortalContext);
     const [portalId] = useState(() => `portal_${Date.now()}_${Math.random()}`);

package/build/overlay/ZSPortal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface PortalContextType {\n  registerPortal: (id: string, element: ReactNode) => void;\n  unregisterPortal: (id: string) => void;\n}\n\nconst PortalContext = createContext<PortalContextType | null>(null);\n\ninterface PortalProviderProps {\n  children: ReactNode;\n}\n\nexport const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {\n  const [portals, setPortals] = useState<Map<string, ReactNode>>(new Map());\n\n  const registerPortal = useCallback((id: string, element: ReactNode) => {\n    setPortals(prev => {\n      // 동일한 요소가 이미 등록되어 있다면 업데이트하지 않음\n      if (prev.get(id) === element) {\n        return prev;\n      }\n      const newMap = new Map(prev);\n      newMap.set(id, element);\n      return newMap;\n    });\n  }, []);\n\n  const unregisterPortal = useCallback((id: string) => {\n    setPortals(prev => {\n      // 해당 ID가 존재하지 않으면 상태를 변경하지 않음\n      if (!prev.has(id)) {\n        return prev;\n      }\n      const newMap = new Map(prev);\n      newMap.delete(id);\n      return newMap;\n    });\n  }, []);\n\n  return (\n    <PortalContext.Provider value={{ registerPortal, unregisterPortal }}>\n      {children}\n      {Array.from(portals.entries()).map(([id, element]) => (\n        <Animated.View entering={FadeInDown} exiting={FadeOutDown} key={id} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none', zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD }}>\n          {element}\n        </Animated.View>\n      ))}\n    </PortalContext.Provider>\n  );\n};\n\n// ------------------------------------------------------------------------------------------------\n\ninterface PortalProps {\n  children: ReactNode;\n  isFocused?: boolean;\n}\n\nexport const ZSPortal: React.FC<PortalProps> = ({ children, isFocused = true }) => {\n  const context = useContext(PortalContext);\n  const [portalId] = useState(() => `portal_${Date.now()}_${Math.random()}`);\n\n  useEffect(() => {\n    if (!context) return;\n    if (isFocused) {\n      context.registerPortal(portalId, children);\n    } else {\n      context.unregisterPortal(portalId);\n    }\n  }, [isFocused, children]);\n\n  useEffect(() => {\n    return () => {\n      if (!context) return;\n      context.unregisterPortal(portalId);\n    };\n  }, []);\n\n  return null;\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useState, useCallback, useMemo, ReactNode, useEffect } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface PortalContextType {\n  registerPortal: (id: string, element: ReactNode) => void;\n  unregisterPortal: (id: string) => void;\n}\n\nconst PortalContext = createContext<PortalContextType | null>(null);\n\ninterface PortalProviderProps {\n  children: ReactNode;\n}\n\nexport const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {\n  const [portals, setPortals] = useState<Map<string, ReactNode>>(new Map());\n\n  const registerPortal = useCallback((id: string, element: ReactNode) => {\n    setPortals(prev => {\n      if (prev.get(id) === element) {\n        return prev;\n      }\n      const newMap = new Map(prev);\n      newMap.set(id, element);\n      return newMap;\n    });\n  }, []);\n\n  const unregisterPortal = useCallback((id: string) => {\n    setPortals(prev => {\n      if (!prev.has(id)) {\n        return prev;\n      }\n      const newMap = new Map(prev);\n      newMap.delete(id);\n      return newMap;\n    });\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({ registerPortal, unregisterPortal }),\n    [registerPortal, unregisterPortal]\n  );\n\n  return (\n    <PortalContext.Provider value={contextValue}>\n      {children}\n      {Array.from(portals.entries()).map(([id, element]) => (\n        <Animated.View entering={FadeInDown} exiting={FadeOutDown} key={id} style={styles.portalLayer}>\n          {element}\n        </Animated.View>\n      ))}\n    </PortalContext.Provider>\n  );\n};\n\nconst styles = StyleSheet.create({\n  portalLayer: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    pointerEvents: 'box-none',\n    zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,\n  },\n});\n\ninterface PortalProps {\n  children: ReactNode;\n  isFocused?: boolean;\n}\n\nexport const ZSPortal: React.FC<PortalProps> = ({ children, isFocused = true }) => {\n  const context = useContext(PortalContext);\n  const [portalId] = useState(() => `portal_${Date.now()}_${Math.random()}`);\n\n  useEffect(() => {\n    if (!context) return;\n    if (isFocused) {\n      context.registerPortal(portalId, children);\n    } else {\n      context.unregisterPortal(portalId);\n    }\n  }, [isFocused, children]);\n\n  useEffect(() => {\n    return () => {\n      if (!context) return;\n      context.unregisterPortal(portalId);\n    };\n  }, []);\n\n  return null;\n};\n"]}

package/build/overlay/ui/ModalBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAUlD,SAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,EAAwB;IACrI,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,MAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,KAAK,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,MAAM,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,OAAO,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAC7Q,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC7B,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,aAE7B,KAAC,SAAS,IACR,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAErB,EAEX,QAAQ,IACK,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,YAAY;KAC3B;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAG,UAAU,CAAC,YAAY;KAC3B;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface ModalBackgroundProps {\n  zIndex?: number;\n  modalBgColor: string;\n  position?: 'center' | 'left' | 'right' | 'pop'; // TODO: 'left' | 'right' 미구현\n  children: React.ReactNode;\n  onPress?: () => void;\n}\n\nfunction ModalBackground({ modalBgColor, position = 'center', children, onPress, zIndex = Z_INDEX_VALUE.DEFAULT }: ModalBackgroundProps) {\n  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n  return (\n    <Animated.View\n      style={[styles.modalBg, { zIndex }, position === 'center' && { justifyContent: 'center', alignItems: 'center' }, position === 'left' && { justifyContent: 'flex-start', alignItems: 'center' }, position === 'right' && { justifyContent: 'flex-end', alignItems: 'center' }]}\n      entering={FadeIn.duration(50)}\n      exiting={FadeOut.duration(50)}\n    >\n      <Pressable\n        style={styles.fullScreen}\n        onPress={onPress ?? (() => { })}\n      >\n      </Pressable>\n\n      {children}\n    </Animated.View>\n  );\n}\n\nconst createStyles = (modalBgColor: string) =>\n  StyleSheet.create({\n    modalBg: {\n      backgroundColor: modalBgColor,\n      ...StyleSheet.absoluteFill,\n    },\n    fullScreen: {\n      width: '100%',\n      height: '100%',\n      ...StyleSheet.absoluteFill,\n    },\n  });\n\nexport default ModalBackground;\n"]}
+{"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAUlD,SAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,EAAwB;IACrI,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,MAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,KAAK,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,MAAM,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,OAAO,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAC7Q,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC7B,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,aAE7B,KAAC,SAAS,IACR,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAErB,EAEX,QAAQ,IACK,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,YAAY;KAC3B;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAG,UAAU,CAAC,YAAY;KAC3B;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface ModalBackgroundProps {\n  zIndex?: number;\n  modalBgColor: string;\n  position?: 'center' | 'left' | 'right' | 'pop';\n  children: React.ReactNode;\n  onPress?: () => void;\n}\n\nfunction ModalBackground({ modalBgColor, position = 'center', children, onPress, zIndex = Z_INDEX_VALUE.DEFAULT }: ModalBackgroundProps) {\n  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n  return (\n    <Animated.View\n      style={[styles.modalBg, { zIndex }, position === 'center' && { justifyContent: 'center', alignItems: 'center' }, position === 'left' && { justifyContent: 'flex-start', alignItems: 'center' }, position === 'right' && { justifyContent: 'flex-end', alignItems: 'center' }]}\n      entering={FadeIn.duration(50)}\n      exiting={FadeOut.duration(50)}\n    >\n      <Pressable\n        style={styles.fullScreen}\n        onPress={onPress ?? (() => { })}\n      >\n      </Pressable>\n\n      {children}\n    </Animated.View>\n  );\n}\n\nconst createStyles = (modalBgColor: string) =>\n  StyleSheet.create({\n    modalBg: {\n      backgroundColor: modalBgColor,\n      ...StyleSheet.absoluteFill,\n    },\n    fullScreen: {\n      width: '100%',\n      height: '100%',\n      ...StyleSheet.absoluteFill,\n    },\n  });\n\nexport default ModalBackground;\n"]}

package/build/theme/elevation.d.ts

@@ -1,18 +1,102 @@
-import { ShadowLevel, ShadowStyle } from "./types";
+import type { BoxShadowValue } from "react-native";
+import { ShadowLevel } from "./types";
 import { Theme } from "./types";
-export declare const IOS_SHADOW: readonly ShadowStyle[];
+export declare const IOS_SHADOW: readonly [{
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 0;
+    };
+    readonly shadowOpacity: 0;
+    readonly shadowRadius: 0;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 1;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 1;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 1;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 1.41;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 1;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 2.22;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 2;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 2.62;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 2;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 3.84;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 3;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 4.65;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 4;
+    };
+    readonly shadowOpacity: 0.25;
+    readonly shadowRadius: 4.65;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 6;
+    };
+    readonly shadowOpacity: 0.25;
+    readonly shadowRadius: 4.65;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 8;
+    };
+    readonly shadowOpacity: 0.25;
+    readonly shadowRadius: 5.8;
+}, {
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 10;
+    };
+    readonly shadowOpacity: 0.25;
+    readonly shadowRadius: 6.5;
+}];
 export interface ElevationProps {
-    shadowColor?: string;
-    shadowOffset?: {
-        width: number;
-        height: number;
-    };
-    shadowOpacity?: number;
-    shadowRadius?: number;
-    elevation?: number;
+    boxShadow?: BoxShadowValue[];
 }
 export type ElevationStyles = {
     [key in ShadowLevel]: ElevationProps;
 };
+export interface ColorChannels {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** `rgb()`/`rgba()` 색상 문자열에서 r·g·b·a 채널을 추출한다. 파싱 실패 시 불투명 검정으로 폴백. */
+export declare function parseColorChannels(color: string): ColorChannels;
+/**
+ * IOS_SHADOW 의 레벨별 오프셋·블러와 elevationShadow 색상을 합쳐 cross-platform boxShadow 를 만든다.
+ * 기존 iOS 그림자와 동일하게 최종 불투명도는 색상 alpha × shadowOpacity 로 계산한다.
+ */
+export declare function createBoxShadow(level: ShadowLevel, shadowColor: string): BoxShadowValue[];
 export default function elevation(palette: Theme): ElevationStyles;
 //# sourceMappingURL=elevation.d.ts.map

package/build/theme/elevation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,UAAU,EAAE,SAAS,WAAW,EAYnC,CAAC;AAEX,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,WAAW,GAAG,cAAc;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,OAAO,EAAE,KAAK,GAAG,eAAe,CAqCjE"}
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,WAAW,EAAe,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYoB,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,WAAW,GAAG,cAAc;CACrC,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAY/D;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,cAAc,EAAE,CAkBzF;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,OAAO,EAAE,KAAK,GAAG,eAAe,CAKjE"}

package/build/theme/elevation.js

@@ -1,4 +1,3 @@
-import { Platform } from "react-native";
 export const IOS_SHADOW = [
     { shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },
     { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.0 },
@@ -12,41 +11,46 @@ export const IOS_SHADOW = [
     { shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 5.8 },
     { shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.25, shadowRadius: 6.5 },
 ];
-export default function elevation(palette) {
-    // iOS와 웹에서는 shadowOffset/shadowOpacity/shadowRadius를 사용 (웹은 CSS box-shadow로 변환됨)
-    // Android에서는 elevation 속성을 사용
-    const useShadowStyle = Platform.OS === 'ios' || Platform.OS === 'web';
+const SHADOW_LEVELS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+/** `rgb()`/`rgba()` 색상 문자열에서 r·g·b·a 채널을 추출한다. 파싱 실패 시 불투명 검정으로 폴백. */
+export function parseColorChannels(color) {
+    const group = color.match(/rgba?\(([^)]+)\)/i)?.[1];
+    if (!group) {
+        return { r: 0, g: 0, b: 0, a: 1 };
+    }
+    const [r, g, b, a] = group.split(',').map((part) => parseFloat(part.trim()));
     return {
-        0: useShadowStyle
-            ? { ...IOS_SHADOW[0], shadowColor: palette.elevationShadow[0] }
-            : { elevation: 0, shadowColor: palette.elevationShadow[0] },
-        1: useShadowStyle
-            ? { ...IOS_SHADOW[1], shadowColor: palette.elevationShadow[1] }
-            : { elevation: 1, shadowColor: palette.elevationShadow[1] },
-        2: useShadowStyle
-            ? { ...IOS_SHADOW[2], shadowColor: palette.elevationShadow[2] }
-            : { elevation: 2, shadowColor: palette.elevationShadow[2] },
-        3: useShadowStyle
-            ? { ...IOS_SHADOW[3], shadowColor: palette.elevationShadow[3] }
-            : { elevation: 3, shadowColor: palette.elevationShadow[3] },
-        4: useShadowStyle
-            ? { ...IOS_SHADOW[4], shadowColor: palette.elevationShadow[4] }
-            : { elevation: 4, shadowColor: palette.elevationShadow[4] },
-        5: useShadowStyle
-            ? { ...IOS_SHADOW[5], shadowColor: palette.elevationShadow[5] }
-            : { elevation: 5, shadowColor: palette.elevationShadow[5] },
-        6: useShadowStyle
-            ? { ...IOS_SHADOW[6], shadowColor: palette.elevationShadow[6] }
-            : { elevation: 6, shadowColor: palette.elevationShadow[6] },
-        7: useShadowStyle
-            ? { ...IOS_SHADOW[7], shadowColor: palette.elevationShadow[7] }
-            : { elevation: 7, shadowColor: palette.elevationShadow[7] },
-        8: useShadowStyle
-            ? { ...IOS_SHADOW[8], shadowColor: palette.elevationShadow[8] }
-            : { elevation: 8, shadowColor: palette.elevationShadow[8] },
-        9: useShadowStyle
-            ? { ...IOS_SHADOW[9], shadowColor: palette.elevationShadow[9] }
-            : { elevation: 9, shadowColor: palette.elevationShadow[9] },
+        r: r ?? 0,
+        g: g ?? 0,
+        b: b ?? 0,
+        a: a === undefined || Number.isNaN(a) ? 1 : a,
     };
 }
+/**
+ * IOS_SHADOW 의 레벨별 오프셋·블러와 elevationShadow 색상을 합쳐 cross-platform boxShadow 를 만든다.
+ * 기존 iOS 그림자와 동일하게 최종 불투명도는 색상 alpha × shadowOpacity 로 계산한다.
+ */
+export function createBoxShadow(level, shadowColor) {
+    const shadow = IOS_SHADOW[level];
+    const { r, g, b, a } = parseColorChannels(shadowColor);
+    const alpha = a * shadow.shadowOpacity;
+    if (alpha <= 0) {
+        return [];
+    }
+    return [
+        {
+            offsetX: shadow.shadowOffset.width,
+            offsetY: shadow.shadowOffset.height,
+            blurRadius: shadow.shadowRadius,
+            spreadDistance: 0,
+            color: `rgba(${r}, ${g}, ${b}, ${alpha})`,
+        },
+    ];
+}
+export default function elevation(palette) {
+    return SHADOW_LEVELS.reduce((styles, level) => {
+        styles[level] = { boxShadow: createBoxShadow(level, palette.elevationShadow[level] ?? '') };
+        return styles;
+    }, {});
+}
 //# sourceMappingURL=elevation.js.map

package/build/theme/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"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","sourcesContent":["import { Platform } from \"react-native\";\nimport { ShadowLevel, ShadowStyle } from \"./types\";\nimport { Theme } from \"./types\";\n\nexport const IOS_SHADOW: readonly ShadowStyle[] = [\n  { shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },\n  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.0 },\n  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.41 },\n  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 2.22 },\n  { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2.62 },\n  { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3.84 },\n  { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.2, shadowRadius: 4.65 },\n  { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4.65 },\n  { shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.25, shadowRadius: 4.65 },\n  { shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 5.8 },\n  { shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.25, shadowRadius: 6.5 },\n] as const;\n\nexport interface ElevationProps {\n  shadowColor?: string;\n  shadowOffset?: { width: number; height: number };\n  shadowOpacity?: number;\n  shadowRadius?: number;\n  elevation?: number;\n}\n\nexport type ElevationStyles = {\n  [key in ShadowLevel]: ElevationProps;\n};\n\nexport default function elevation(palette: Theme): ElevationStyles {\n  // iOS와 웹에서는 shadowOffset/shadowOpacity/shadowRadius를 사용 (웹은 CSS box-shadow로 변환됨)\n  // Android에서는 elevation 속성을 사용\n  const useShadowStyle = Platform.OS === 'ios' || Platform.OS === 'web';\n\n  return {\n    0: useShadowStyle\n      ? { ...IOS_SHADOW[0], shadowColor: palette.elevationShadow[0] }\n      : { elevation: 0, shadowColor: palette.elevationShadow[0] },\n    1: useShadowStyle\n      ? { ...IOS_SHADOW[1], shadowColor: palette.elevationShadow[1] }\n      : { elevation: 1, shadowColor: palette.elevationShadow[1] },\n    2: useShadowStyle\n      ? { ...IOS_SHADOW[2], shadowColor: palette.elevationShadow[2] }\n      : { elevation: 2, shadowColor: palette.elevationShadow[2] },\n    3: useShadowStyle\n      ? { ...IOS_SHADOW[3], shadowColor: palette.elevationShadow[3] }\n      : { elevation: 3, shadowColor: palette.elevationShadow[3] },\n    4: useShadowStyle\n      ? { ...IOS_SHADOW[4], shadowColor: palette.elevationShadow[4] }\n      : { elevation: 4, shadowColor: palette.elevationShadow[4] },\n    5: useShadowStyle\n      ? { ...IOS_SHADOW[5], shadowColor: palette.elevationShadow[5] }\n      : { elevation: 5, shadowColor: palette.elevationShadow[5] },\n    6: useShadowStyle\n      ? { ...IOS_SHADOW[6], shadowColor: palette.elevationShadow[6] }\n      : { elevation: 6, shadowColor: palette.elevationShadow[6] },\n    7: useShadowStyle\n      ? { ...IOS_SHADOW[7], shadowColor: palette.elevationShadow[7] }\n      : { elevation: 7, shadowColor: palette.elevationShadow[7] },\n    8: useShadowStyle\n      ? { ...IOS_SHADOW[8], shadowColor: palette.elevationShadow[8] }\n      : { elevation: 8, shadowColor: palette.elevationShadow[8] },\n    9: useShadowStyle\n      ? { ...IOS_SHADOW[9], shadowColor: palette.elevationShadow[9] }\n      : { elevation: 9, shadowColor: palette.elevationShadow[9] },\n  };\n}\n"]}
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { BoxShadowValue } from \"react-native\";\nimport { ShadowLevel, ShadowStyle } from \"./types\";\nimport { Theme } from \"./types\";\n\nexport const IOS_SHADOW = [\n  { shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },\n  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.0 },\n  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.41 },\n  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 2.22 },\n  { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2.62 },\n  { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3.84 },\n  { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.2, shadowRadius: 4.65 },\n  { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4.65 },\n  { shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.25, shadowRadius: 4.65 },\n  { shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 5.8 },\n  { shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.25, shadowRadius: 6.5 },\n] as const satisfies readonly ShadowStyle[];\n\nexport interface ElevationProps {\n  boxShadow?: BoxShadowValue[];\n}\n\nexport type ElevationStyles = {\n  [key in ShadowLevel]: ElevationProps;\n};\n\nconst SHADOW_LEVELS: readonly ShadowLevel[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\n\nexport interface ColorChannels {\n  r: number;\n  g: number;\n  b: number;\n  a: number;\n}\n\n/** `rgb()`/`rgba()` 색상 문자열에서 r·g·b·a 채널을 추출한다. 파싱 실패 시 불투명 검정으로 폴백. */\nexport function parseColorChannels(color: string): ColorChannels {\n  const group = color.match(/rgba?\\(([^)]+)\\)/i)?.[1];\n  if (!group) {\n    return { r: 0, g: 0, b: 0, a: 1 };\n  }\n  const [r, g, b, a] = group.split(',').map((part) => parseFloat(part.trim()));\n  return {\n    r: r ?? 0,\n    g: g ?? 0,\n    b: b ?? 0,\n    a: a === undefined || Number.isNaN(a) ? 1 : a,\n  };\n}\n\n/**\n * IOS_SHADOW 의 레벨별 오프셋·블러와 elevationShadow 색상을 합쳐 cross-platform boxShadow 를 만든다.\n * 기존 iOS 그림자와 동일하게 최종 불투명도는 색상 alpha × shadowOpacity 로 계산한다.\n */\nexport function createBoxShadow(level: ShadowLevel, shadowColor: string): BoxShadowValue[] {\n  const shadow = IOS_SHADOW[level];\n  const { r, g, b, a } = parseColorChannels(shadowColor);\n  const alpha = a * shadow.shadowOpacity;\n\n  if (alpha <= 0) {\n    return [];\n  }\n\n  return [\n    {\n      offsetX: shadow.shadowOffset.width,\n      offsetY: shadow.shadowOffset.height,\n      blurRadius: shadow.shadowRadius,\n      spreadDistance: 0,\n      color: `rgba(${r}, ${g}, ${b}, ${alpha})`,\n    },\n  ];\n}\n\nexport default function elevation(palette: Theme): ElevationStyles {\n  return SHADOW_LEVELS.reduce((styles, level) => {\n    styles[level] = { boxShadow: createBoxShadow(level, palette.elevationShadow[level] ?? '') };\n    return styles;\n  }, {} as ElevationStyles);\n}\n"]}

package/build/theme/palette.d.ts

@@ -65,11 +65,7 @@ export interface ThemeFactoryConfig {
     light?: ThemeFactoryColors;
     dark?: ThemeFactoryColors;
 }
-/**
- * 테마 팩토리 함수 - SEMANTIC_LIGHT_COLORS와 SEMANTIC_DARK_COLORS를 재정의할 수 있는 기능을 제공합니다.
- * @param config - 라이트/다크 모드별로 색상을 재정의할 수 있는 설정 객체
- * @returns 재정의된 SEMANTIC_LIGHT_COLORS와 SEMANTIC_DARK_COLORS를 포함한 팩토리 함수
- */
+/** 라이트/다크 시맨틱 색상을 재정의해 커스텀 팔레트 함수를 생성한다. */
 export declare function themeFactory(config?: ThemeFactoryConfig): ({ mode, themeColors, }?: {
     mode?: "light" | "dark";
     themeColors?: {

package/build/theme/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAC;AAuMF,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,GAAE,kBAAuB,IA0C5B,yBAG3B;IACD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAC1C,KAAG,KAAK,CAiGf;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAc,EACd,WAAgB,GACjB,GAAE;IACD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAC1C,GAAG,KAAK,CAsBb"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAC;AAsMF,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAED,4CAA4C;AAC5C,wBAAgB,YAAY,CAAC,MAAM,GAAE,kBAAuB,IAwC5B,yBAG3B;IACD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAC1C,KAAG,KAAK,CA+Ff;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAc,EACd,WAAgB,GACjB,GAAE;IACD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAC1C,GAAG,KAAK,CAqBb"}

package/build/theme/palette.js

@@ -1,6 +1,6 @@
 import { BLACK, PRIMITIVE_BLUE, PRIMITIVE_GREEN, PRIMITIVE_GREY, PRIMITIVE_GREY_DARK, PRIMITIVE_ORANGE, PRIMITIVE_RED, PRIMITIVE_TEAL, PRIMITIVE_YELLOW, SHADOW_COLORS, WHITE } from "./primitive";
 export const transparency = {
-    '0%': '00', // 완전 투명
+    '0%': '00',
     '2%': '05',
     '4%': '0A',
     '6%': '0F',
@@ -50,7 +50,7 @@ export const transparency = {
     '94%': 'F0',
     '96%': 'F5',
     '98%': 'FA',
-    '100%': 'FF' // 완전 불투명
+    '100%': 'FF'
 };
 const MODAL_BG_COLOR = {
     light: PRIMITIVE_GREY[90] + transparency['52%'],
@@ -242,13 +242,8 @@ const SEMANTIC_BACKGROUND_COLORS = {
         information: SEMANTIC_DARK_COLORS.information[80],
     },
 };
-/**
- * 테마 팩토리 함수 - SEMANTIC_LIGHT_COLORS와 SEMANTIC_DARK_COLORS를 재정의할 수 있는 기능을 제공합니다.
- * @param config - 라이트/다크 모드별로 색상을 재정의할 수 있는 설정 객체
- * @returns 재정의된 SEMANTIC_LIGHT_COLORS와 SEMANTIC_DARK_COLORS를 포함한 팩토리 함수
- */
+/** 라이트/다크 시맨틱 색상을 재정의해 커스텀 팔레트 함수를 생성한다. */
 export function themeFactory(config = {}) {
-    // 기본 색상들을 깊은 복사로 생성
     const createCustomLightColors = () => {
         const customColors = { ...SEMANTIC_LIGHT_COLORS };
         if (config.light) {
@@ -281,10 +276,8 @@ export function themeFactory(config = {}) {
     };
     const customLightColors = createCustomLightColors();
     const customDarkColors = createCustomDarkColors();
-    // 재정의된 색상으로 새로운 팔레트 함수 반환
     return function createPalette({ mode = 'light', themeColors = {}, } = {}) {
         const colors = mode === 'light' ? customLightColors : customDarkColors;
-        // 재정의된 색상을 기반으로 동적으로 색상 매핑 생성
         const customTextColors = {
             light: {
                 primary: colors.primary.main,
@@ -364,7 +357,6 @@ export function themeFactory(config = {}) {
             modalBgColor: MODAL_BG_COLOR[mode],
             mainColor: customMainColors[mode]
         };
-        // 사용자 정의 테마 컬러가 있을 경우 병합
         if (themeColors?.[mode]) {
             return {
                 ...theme,
@@ -385,7 +377,6 @@ export default function palette({ mode = 'light', themeColors = {}, } = {}) {
         modalBgColor: MODAL_BG_COLOR[mode],
         mainColor: MAIN_COLORS[mode]
     };
-    // 사용자 정의 테마 컬러가 있을 경우 병합
     if (themeColors?.[mode]) {
         return {
             ...theme,