@class101/cdn-ui-system 0.0.10 → 0.0.14

package/core/props/position.js

@@ -1,10 +1,10 @@
 import {
   position
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/position.ts
 init_react_shim();

package/core/props/shadow.js

@@ -1,10 +1,10 @@
 import {
   shadow
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/shadow.ts
 init_react_shim();

package/core/props/space.js

@@ -1,10 +1,10 @@
 import {
   space
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/space.ts
 init_react_shim();

package/core/props/transform.js

@@ -1,13 +1,28 @@
 import {
   system
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/transform.ts
 init_react_shim();
+var REACT_NATIVE_VALID_TRANSFORM_FUNCTIONS = [
+  "perspective",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "translateX",
+  "translateY",
+  "skewX",
+  "skewY",
+  "matrix"
+];
 function getTransformValue(value) {
   if (value === void 0) {
     return "";
@@ -22,6 +37,10 @@ var transform = system({
     property: "transform",
     transform: (value) => {
       let style = "";
+      if (value["perspective"]) {
+        style += `perspective(${getTransformValue(value["perspective"])}) `;
+        value["perspective"] = void 0;
+      }
       for (const key of Object.keys(value)) {
         if (value[key] === void 0) {
           continue;
@@ -32,6 +51,13 @@ var transform = system({
     }
   }
 });
+var nativeTransform = system({
+  transform: {
+    property: "transform",
+    transform: (value) => Object.keys(value).filter((key) => REACT_NATIVE_VALID_TRANSFORM_FUNCTIONS.includes(key) && value[key] !== void 0).map((key) => ({ [key]: value[key] }))
+  }
+});
 export {
+  nativeTransform,
   transform
 };

package/core/props/transition.js

@@ -1,10 +1,10 @@
 import {
   system
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/transition.ts
 init_react_shim();

package/core/props/types/ResponsiveValue.js

@@ -1,6 +1,6 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/types/ResponsiveValue.ts
 init_react_shim();

package/core/props/types/SystemComponent.js

@@ -1,6 +1,6 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/types/SystemComponent.ts
 init_react_shim();

package/core/props/typography.js

@@ -2,11 +2,11 @@ import {
   compose,
   system,
   typography
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/typography.ts
 init_react_shim();
@@ -28,6 +28,9 @@ var customTypography = system({
   userSelect: true
 });
 var typography2 = compose(typography, customTypography);
+var nativeCustomTypography = system({});
+var nativeTypography = compose(typography, nativeCustomTypography);
 export {
+  nativeTypography,
   typography2 as typography
 };

package/core/props/utils/calculateResponsiveValues.js

@@ -0,0 +1,27 @@
+import {
+  init_react_shim
+} from "../../../chunk-IPJCOOHW.js";
+
+// libs/shared/ui-system/src/core/props/utils/calculateResponsiveValues.ts
+init_react_shim();
+var getSafeResponsiveValue = (responsiveValue, index) => {
+  if (Array.isArray(responsiveValue)) {
+    return responsiveValue[Math.min(responsiveValue.length - 1, index)];
+  }
+  return responsiveValue;
+};
+var calculateResponsiveValues = (...values) => {
+  const fn = values.pop();
+  const maxResponsiveLength = values.reduce((prev, value) => Math.max(prev, Array.isArray(value) ? value.length : 1), 1);
+  const resultValue = new Array(maxResponsiveLength).fill(void 0).map((_, index) => fn(...values.map((value) => getSafeResponsiveValue(value, index))));
+  return resultValue.length === 1 ? resultValue[0] : resultValue.reduce((prev, value) => {
+    Object.keys(value).forEach((key) => {
+      var _a;
+      prev[key] = [...(_a = prev[key]) != null ? _a : [], value[key]];
+    });
+    return prev;
+  }, {});
+};
+export {
+  calculateResponsiveValues
+};

package/core/props/utils/getResponsiveValue.js

@@ -1,16 +1,18 @@
 import {
   require_lodash
-} from "../../../chunk-IKYIYCM6.js";
+} from "../../../chunk-YJWVUALA.js";
 import {
+  __spreadProps,
+  __spreadValues,
   __toModule,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/utils/getResponsiveValue.ts
 init_react_shim();
 var import_lodash = __toModule(require_lodash());
 var getBreakpointKeys = (breakpoints) => {
-  const {length} = breakpoints;
+  const { length } = breakpoints;
   const breakpointPixels = breakpoints.map((breakpoint) => parseInt(breakpoint, 10));
   return (0, import_lodash.range)(length + 1).map((idx) => {
     if (idx === 0) {
@@ -24,10 +26,9 @@ var getResponsiveOptions = (breakpoints, responsiveOptions) => {
   const options = Object.fromEntries(new Map(breakpointKeys.map((_, idx) => [breakpointKeys[idx], {}])));
   Object.entries(responsiveOptions).forEach(([key, value]) => {
     (0, import_lodash.range)(breakpointKeys.length).forEach((idx) => {
-      options[breakpointKeys[idx]] = {
-        ...options[breakpointKeys[idx]],
+      options[breakpointKeys[idx]] = __spreadProps(__spreadValues({}, options[breakpointKeys[idx]]), {
         [key]: value[idx <= value.length - 1 ? idx : value.length - 1]
-      };
+      });
     });
   });
   return options;

package/core/props/utils/skipForwardProps.js

@@ -1,9 +1,9 @@
 import {
   emotion_memoize_browser_esm_default
-} from "../../../chunk-QN5Q5NTF.js";
+} from "../../../chunk-QFKGGJAB.js";
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/utils/skipForwardProps.ts
 init_react_shim();

package/core/props/video.js

@@ -1,11 +1,11 @@
 import {
   compose,
   system
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
+} from "../../chunk-DNFIUSBY.js";
+import "../../chunk-XYFEP7P7.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/props/video.ts
 init_react_shim();

package/core/theme/baseTheme.js

@@ -1,10 +1,11 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/theme/baseTheme.ts
 init_react_shim();
 var baseTheme = {
+  maxWidth: 1304,
   space: {
     0: 0,
     2: 2,
@@ -20,13 +21,23 @@ var baseTheme = {
     24: 24,
     28: 28,
     30: 30,
+    32: 32,
     36: 36,
     40: 40,
     48: 48,
     56: 56,
-    120: 120
+    64: 64,
+    72: 72,
+    80: 80,
+    100: 100,
+    120: 120,
+    160: 160,
+    200: 200
   },
-  breakpoints: ["414px", "768px", "1240px"]
+  breakpoints: ["414px", "768px", "1240px"],
+  mediaQueries: {
+    mobile: "(max-width: 640px)"
+  }
 };
 export {
   baseTheme

package/core/theme/defaultTheme.js

@@ -1,18 +1,18 @@
 import {
+  __spreadProps,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/theme/defaultTheme.ts
 init_react_shim();
-import {LightModeColors} from "../colors/LightModeColors.js";
-import {baseTheme} from "./baseTheme.js";
-var defaultTheme = {
-  ...baseTheme,
-  colors: {
-    ...LightModeColors,
+import { LightModeColors } from "../colors/LightModeColors.js";
+import { baseTheme } from "./baseTheme.js";
+var defaultTheme = __spreadProps(__spreadValues({}, baseTheme), {
+  colors: __spreadProps(__spreadValues({}, LightModeColors), {
     primary: LightModeColors.orange
-  }
-};
+  })
+});
 export {
   defaultTheme
 };

package/core/theme/signatureTheme.js

@@ -1,18 +1,19 @@
 import {
+  __spreadProps,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/theme/signatureTheme.ts
 init_react_shim();
-import {DarkModeColors} from "../colors/DarkModeColors.js";
-import {baseTheme} from "./baseTheme.js";
-var signatureTheme = {
-  ...baseTheme,
-  colors: {
-    ...DarkModeColors,
-    primary: DarkModeColors.orange
-  }
-};
+import { DarkModeColors } from "../colors/DarkModeColors.js";
+import { baseTheme } from "./baseTheme.js";
+var signatureTheme = __spreadProps(__spreadValues({}, baseTheme), {
+  colors: __spreadProps(__spreadValues({}, DarkModeColors), {
+    primary: DarkModeColors.orange,
+    gray: __spreadProps(__spreadValues({}, DarkModeColors.gray), { 0: "#1A1A1A" })
+  })
+});
 export {
   signatureTheme
 };

package/core/variants/baseVariant/baseVariant.js

@@ -1,15 +1,15 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/variants/baseVariant/baseVariant.ts
 init_react_shim();
-function getVariantValue(key, variantFnOrRecord) {
+function getVariantValue(prop, variantFnOrRecord) {
   if (Object.keys(variantFnOrRecord).length > 0) {
-    return variantFnOrRecord[key];
+    return variantFnOrRecord[prop];
   }
   if (typeof variantFnOrRecord === "function") {
-    return variantFnOrRecord(key);
+    return variantFnOrRecord(prop);
   }
   return {};
 }

package/core/variants/baseVariant/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/variants/baseVariant/index.ts
 init_react_shim();
-import {getVariantValue} from "./baseVariant.js";
+import { getVariantValue } from "./baseVariant.js";
 export {
   getVariantValue
 };

package/core/variants/makeStyled/index.js

@@ -0,0 +1,11 @@
+import {
+  init_react_shim
+} from "../../../chunk-IPJCOOHW.js";
+
+// libs/shared/ui-system/src/core/variants/makeStyled/index.ts
+init_react_shim();
+import { makeStyled, makeStyle } from "./makeStyled.js";
+export {
+  makeStyle,
+  makeStyled
+};

package/core/variants/makeStyled/makeStyled.js

@@ -0,0 +1,18 @@
+import {
+  emotion_styled_browser_esm_default
+} from "../../../chunk-7BBOJQDQ.js";
+import "../../../chunk-IANUYI35.js";
+import "../../../chunk-KAXHKCBQ.js";
+import "../../../chunk-QFKGGJAB.js";
+import {
+  init_react_shim
+} from "../../../chunk-IPJCOOHW.js";
+
+// libs/shared/ui-system/src/core/variants/makeStyled/makeStyled.ts
+init_react_shim();
+var makeStyled = (component) => emotion_styled_browser_esm_default(component);
+var makeStyle = (style) => style;
+export {
+  makeStyle,
+  makeStyled
+};

package/core/variants/propVariant/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/variants/propVariant/index.ts
 init_react_shim();
-import {propVariant} from "./propVariant.js";
+import { propVariant } from "./propVariant.js";
 export {
   propVariant
 };

package/core/variants/propVariant/propVariant.js

@@ -1,21 +1,23 @@
 import {
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/variants/propVariant/propVariant.ts
 init_react_shim();
-import {getVariantValue} from "../baseVariant/index.js";
+import { getVariantValue } from "../baseVariant/index.js";
 function propVariant(option) {
   return (originalProps) => {
-    const {variants, prop, defaultValue, responsive, skipForward} = option;
-    const variantKey = originalProps[prop] ?? defaultValue;
+    var _a;
+    const { variants, prop, defaultValue, responsive, skipForward } = option;
+    const variantKey = (_a = originalProps[prop]) != null ? _a : defaultValue;
     if (variantKey === void 0 || !variants) {
       return originalProps;
     }
     let nextProps;
     if (responsive && Array.isArray(variantKey)) {
       const variantValue = variantKey.reduce((prev, curr, index) => {
-        const nextValue = {...prev};
+        const nextValue = __spreadValues({}, prev);
         const value = getVariantValue(curr, variants);
         for (const key of Object.keys(value)) {
           if (prev[key] === void 0) {
@@ -25,15 +27,9 @@ function propVariant(option) {
         }
         return nextValue;
       }, {});
-      nextProps = {
-        ...originalProps,
-        ...variantValue
-      };
+      nextProps = __spreadValues(__spreadValues({}, originalProps), variantValue);
     } else {
-      nextProps = {
-        ...originalProps,
-        ...getVariantValue(variantKey, variants)
-      };
+      nextProps = __spreadValues(__spreadValues({}, originalProps), getVariantValue(variantKey, variants));
     }
     if (skipForward) {
       delete nextProps[prop];

package/core/variants/propVariant/propVariant.spec.js

@@ -1,21 +1,21 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-IPJCOOHW.js";
 
 // libs/shared/ui-system/src/core/variants/propVariant/propVariant.spec.ts
 init_react_shim();
-import {propVariant} from "./propVariant.js";
+import { propVariant } from "./propVariant.js";
 describe("propVariant", () => {
   describe.each([
     {
       type: "\uD568\uC218",
-      variants: (value) => ({testResult: value + 1})
+      variants: (value) => ({ testResult: value + 1 })
     },
     {
       type: "\uAC1D\uCCB4",
-      variants: {3: {testResult: 4}, 4: {testResult: 5}}
+      variants: { 3: { testResult: 4 }, 4: { testResult: 5 } }
     }
-  ])("variants\uAC00 $type\uB85C \uC815\uC758\uB418\uACE0", ({variants}) => {
+  ])("variants\uAC00 $type\uB85C \uC815\uC758\uB418\uACE0", ({ variants }) => {
     describe("responsive value\uAC00 \uC544\uB2D0 \uB54C", () => {
       let variantFn;
       beforeEach(() => {
@@ -27,7 +27,7 @@ describe("propVariant", () => {
       describe("variant\uC5D0 \uC788\uB294 prop\uC744 \uB118\uACBC\uC744 \uB54C", () => {
         let result;
         beforeEach(() => {
-          result = variantFn({test: 3});
+          result = variantFn({ test: 3 });
         });
         it("variant\uC758 \uACB0\uACFC\uAC12\uC774 \uC800\uC7A5\uB41C\uB2E4", () => {
           expect(result.testResult).toBe(4);
@@ -39,7 +39,7 @@ describe("propVariant", () => {
       describe("variant\uC5D0 \uC5C6\uB294 prop\uC744 \uB118\uACBC\uC744 \uB54C", () => {
         let result;
         beforeEach(() => {
-          result = variantFn({test2: 3});
+          result = variantFn({ test2: 3 });
         });
         it("variant\uAC00 \uC801\uC6A9\uB41C \uAC12\uC740 \uC5C6\uB2E4", () => {
           expect(result.testResult).toBeUndefined();
@@ -52,12 +52,12 @@ describe("propVariant", () => {
     describe("responsive value\uC77C \uB54C", () => {
       let variantFn;
       beforeEach(() => {
-        variantFn = propVariant({prop: "test", variants, responsive: true});
+        variantFn = propVariant({ prop: "test", variants, responsive: true });
       });
       describe("prop\uC744 \uBC30\uC5F4\uB85C \uB118\uAE30\uBA74", () => {
         let result;
         beforeEach(() => {
-          result = variantFn({test: [3, 4, 3, 4]});
+          result = variantFn({ test: [3, 4, 3, 4] });
         });
         it("variant\uAC00 \uC801\uC6A9\uB41C \uAC12\uC774 \uBC30\uC5F4\uB85C \uC5F0\uC0B0\uB418\uC5B4 \uB098\uC628\uB2E4", () => {
           expect(result.testResult).toEqual([4, 5, 4, 5]);
@@ -69,7 +69,7 @@ describe("propVariant", () => {
     });
     describe("prop \uAC12\uC774 \uB118\uC5B4\uAC00\uC9C0 \uC54A\uC744 \uB54C", () => {
       let variantFn;
-      const execute = () => variantFn({test: null});
+      const execute = () => variantFn({ test: null });
       describe("defaultValue\uAC00 \uC124\uC815\uB418\uC5B4 \uC788\uC73C\uBA74", () => {
         beforeEach(() => {
           variantFn = propVariant({

package/core/variants/propsVariant/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../../chunk-IPJCOOHW.js";
+
+// libs/shared/ui-system/src/core/variants/propsVariant/index.ts
+init_react_shim();
+import { propsVariant } from "./propsVariant.js";
+export {
+  propsVariant
+};

package/core/variants/propsVariant/propsVariant.js

@@ -0,0 +1,32 @@
+import {
+  __spreadProps,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-IPJCOOHW.js";
+
+// libs/shared/ui-system/src/core/variants/propsVariant/propsVariant.ts
+init_react_shim();
+import { getPaddedResponsiveArray } from "../../props/utils/getResponsiveValue.js";
+import { getVariantValue } from "../baseVariant/index.js";
+function propsVariant(options) {
+  return (originalProps) => {
+    const { props, variants } = options;
+    const { __theme__ } = originalProps;
+    const nextProps = __spreadValues({}, originalProps);
+    const values = props ? props.reduce((prev, curr) => {
+      if (curr.skipForward) {
+        delete nextProps[curr.name];
+      }
+      if (originalProps[curr.name] === void 0) {
+        return prev;
+      }
+      return __spreadProps(__spreadValues({}, prev), {
+        [curr.name]: curr.responsive ? getPaddedResponsiveArray(__theme__.breakpoints, originalProps[curr.name]) : originalProps[curr.name]
+      });
+    }, {}) : originalProps;
+    return __spreadValues(__spreadValues({}, nextProps), getVariantValue(values, variants));
+  };
+}
+export {
+  propsVariant
+};

package/core/variants/propsVariant/propsVariant.spec.js

@@ -0,0 +1,73 @@
+import {
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-IPJCOOHW.js";
+
+// libs/shared/ui-system/src/core/variants/propsVariant/propsVariant.spec.ts
+init_react_shim();
+import { defaultTheme } from "../../theme/defaultTheme.js";
+import { propsVariant } from "./propsVariant.js";
+import { getPaddedResponsiveArray } from "../../props/utils/getResponsiveValue.js";
+describe("propsVariant", () => {
+  const theme = defaultTheme;
+  describe("Props\uC5D0 size, direction\uC774 \uC788\uACE0", () => {
+    let variantFn;
+    beforeEach(() => {
+      variantFn = propsVariant({
+        props: [
+          {
+            name: "size",
+            skipForward: true
+          },
+          {
+            name: "direction",
+            responsive: true
+          }
+        ],
+        variants: ({ size, direction }) => ({
+          result: {
+            size,
+            direction
+          }
+        })
+      });
+    });
+    describe.each([
+      { props: { size: "sm", direction: "vertical" } },
+      { props: { size: "sm", direction: ["vertical", "horizontal"] } }
+    ])("prop\uC5D0 $props.size, $props.direction\uC744 \uB118\uAE30\uBA74", ({ props }) => {
+      let variantFnResult;
+      beforeEach(() => {
+        variantFnResult = variantFn(__spreadValues({
+          __theme__: theme
+        }, props));
+      });
+      it("skipForward \uC635\uC158\uC744 \uC900 size prop\uC740 \uC0AC\uB77C\uC9C4\uB2E4", () => {
+        expect(variantFnResult.size).toBeUndefined();
+      });
+      it("skipForward \uC635\uC158\uC744 \uC8FC\uC9C0 \uC54A\uC740 direction prop\uC740 \uADF8\uB300\uB85C\uC774\uB2E4", () => {
+        expect(variantFnResult.direction).toEqual(props.direction);
+      });
+      it("result\uC5D0 size\uB294 prop\uC73C\uB85C \uB118\uAE34 size \uAC12\uC774\uB2E4", () => {
+        expect(variantFnResult.result.size).toEqual(props.size);
+      });
+      it("result\uC5D0 direction\uC740 breakpoints \uB9CC\uD07C \uBC30\uC5F4\uB85C \uB9CC\uB4E4\uC5B4\uC9C4\uB2E4", () => {
+        expect(variantFnResult.result.direction).toEqual(getPaddedResponsiveArray(theme.breakpoints, props.direction));
+      });
+    });
+    describe(`prop\uC5D0 size, direction \uAC12\uC744 \uB118\uAE30\uC9C0 \uC54A\uC73C\uBA74`, () => {
+      let variantFnResult;
+      beforeEach(() => {
+        variantFnResult = variantFn({
+          __theme__: theme
+        });
+      });
+      it("result\uC5D0 size \uAC12\uC740 undefined\uC774\uB2E4", () => {
+        expect(variantFnResult.result.size).toBeUndefined();
+      });
+      it("result\uC5D0 direction \uAC12\uC740 undefined\uC774\uB2E4", () => {
+        expect(variantFnResult.result.direction).toBeUndefined();
+      });
+    });
+  });
+});