@basiln/utils 0.1.12 → 0.1.14

package/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "@emotion/react"
+      }
+    ]
+  ],
+  "plugins": [
+    "@emotion/babel-plugin"
+  ]
+}

package/README.md

@@ -26,6 +26,7 @@ yarn add @basiln/utils
 - [DomainFormat](#domainformat)
 - [useCombinedRefs](#usecombinedrefs)
 - [useControllableState](#usecontrollablestate)
+- [Grid](#grid)
 
 ### `If`
 
@@ -386,3 +387,34 @@ const TextField = forwardRef((props, forwardedRef) => {
 
 ```
 
+### `Grid`
+
+선언적으로 `Grid` 스타일링을 할 수 있는 컴포넌트입니다.
+
+```tsx
+import { Grid } from '@basiln/utils';
+
+<Grid columns={['1fr', '1fr', '1fr']} rows={['1fr']} gap={10}>
+  <Grid.Item gridColumn={['1', '3']}>
+    <Content1 />
+  </Grid.Item>
+
+  <Grid.Item>
+    <Content2 />
+  </Grid.Item>
+</Grid>
+
+<Grid areas={'"header header" "sidebar content"'}>
+  <Grid.Item gridArea="header">
+    <Header />
+  </Grid.Item>
+
+  <Grid.Item gridArea="content">
+    <Content1 />
+  </Grid.Item>
+
+  <Grid.Item gridArea="sidebar">
+    <Sidebar />
+  </Grid.Item>
+</Grid>
+```

package/dist/Choose.js

@@ -24,7 +24,7 @@ __export(Choose_exports, {
 });
 module.exports = __toCommonJS(Choose_exports);
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 function Choose({ children }) {
   const validChildren = import_react.Children.toArray(children);
   const matchingChild = validChildren.find(

package/dist/Choose.mjs

@@ -1,6 +1,6 @@
 import {
   Choose
-} from "./chunk-KFMJD3YK.mjs";
+} from "./chunk-5X4P77VE.mjs";
 export {
   Choose
 };

package/dist/DomainFormat.js

@@ -49,8 +49,8 @@ function formatModeColor(mode, customMapping = {}) {
 }
 function formatWind(wind, customMapping = {}) {
   const defaultWindMapping = {
-    1: "\uBBF8\uD48D",
-    2: "\uC57D\uD48D",
+    1: "\uC57D\uD48D",
+    2: "\uC911\uD48D",
     3: "\uAC15\uD48D"
   };
   const combinedMapping = { ...defaultWindMapping, ...customMapping };

package/dist/DomainFormat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DomainFormat.ts"],"sourcesContent":["export type Mode = 'H' | 'C' | 'W';\nexport type Wind = 1 | 2 | 3;\nexport type AirLevel = 1 | 2 | 3 | 4 | 5;\nexport type UserLevel = '1' | '2' | '3' | '4';\nexport type Language = 'en' | 'ko';\n\nfunction formatModeName(mode: Mode, customMapping: Record<string, string> = {}): string {\n  const defaultModeMapping: Record<Mode, string> = {\n    H: '난방',\n    C: '냉방',\n    W: '송풍',\n  };\n\n  const combinedMapping = { ...defaultModeMapping, ...customMapping };\n\n  if (!(mode in combinedMapping)) {\n    throw new Error(`지원하지 않는 모드입니다. mode: ${mode}`);\n  }\n\n  return combinedMapping[mode];\n}\n\nfunction formatModeColor(mode: Mode, customMapping: Record<string, string> = {}) {\n  const defaultColorMapping: Record<Mode, string> = {\n    H: '#e77676',\n    C: '#9fc6ff',\n    W: '#a8e379',\n  };\n\n  const combinedMapping = { ...defaultColorMapping, ...customMapping };\n\n  if (!(mode in combinedMapping)) {\n    throw new Error(`지원하지 않는 모드입니다. mode: ${mode}`);\n  }\n\n  return combinedMapping[mode];\n}\n\nfunction formatWind(wind: Wind, customMapping: Record<string, string> = {}) {\n  const defaultWindMapping: Record<Wind, string> = {\n    1: '미풍',\n    2: '약풍',\n    3: '강풍',\n  };\n\n  const combinedMapping = { ...defaultWindMapping, ...customMapping };\n\n  if (!(wind in combinedMapping)) {\n    throw new Error(`지원하지 않는 풍량입니다. wind: ${wind}`);\n  }\n\n  return combinedMapping[wind];\n}\n\nfunction formatAirLevelName(level: AirLevel) {\n  const airLevelMapping: Record<AirLevel, string> = {\n    1: '매우 나쁨',\n    2: '나쁨',\n    3: '보통',\n    4: '좋음',\n    5: '매우 좋음',\n  };\n\n  if (!(level in airLevelMapping)) {\n    throw new Error(`지원하지 않는 레벨입니다. level: ${level}`);\n  }\n\n  return airLevelMapping[level];\n}\n\nfunction formatAirLevelColor(level: AirLevel) {\n  const colorMapping: Record<AirLevel, string> = {\n    1: '#ff5d47',\n    2: '#ff961c',\n    3: '#ffca42',\n    4: '#63ff60',\n    5: '#49ffe9',\n  };\n\n  if (!(level in colorMapping)) {\n    throw new Error(`지원하지 않는 레벨입니다. level: ${level}`);\n  }\n\n  return colorMapping[level];\n}\n\nconst formatUserLevel = ({ level, language = 'ko' }: { level: UserLevel; language?: Language }) => {\n  const userLevelMapping: Record<Language, Record<UserLevel, string>> = {\n    en: {\n      '1': 'MASTER',\n      '2': 'MASTER KID',\n      '3': 'SENIOR',\n      '4': 'JUNIOR',\n    },\n    ko: {\n      '1': '마스터',\n      '2': '마스터키즈',\n      '3': '시니어',\n      '4': '주니어',\n    },\n  };\n\n  if (!(language in userLevelMapping)) {\n    throw new Error(`지원하지 않는 언어입니다. language: ${language}`);\n  }\n\n  if (!(level in userLevelMapping[language])) {\n    throw new Error(`지원하지 않는 레벨입니다. level: ${level}`);\n  }\n\n  return userLevelMapping[language][level];\n};\n\nexport const DomainFormat = {\n  modeName: formatModeName,\n  modeColor: formatModeColor,\n  wind: formatWind,\n  airLevelName: formatAirLevelName,\n  airLevelColor: formatAirLevelColor,\n  userLevel: formatUserLevel,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,SAAS,eAAe,MAAY,gBAAwC,CAAC,GAAW;AACtF,QAAM,qBAA2C;AAAA,IAC/C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAElE,MAAI,EAAE,QAAQ,kBAAkB;AAC9B,UAAM,IAAI,MAAM,+EAAwB,IAAI,EAAE;AAAA,EAChD;AAEA,SAAO,gBAAgB,IAAI;AAC7B;AAEA,SAAS,gBAAgB,MAAY,gBAAwC,CAAC,GAAG;AAC/E,QAAM,sBAA4C;AAAA,IAChD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,EAAE,GAAG,qBAAqB,GAAG,cAAc;AAEnE,MAAI,EAAE,QAAQ,kBAAkB;AAC9B,UAAM,IAAI,MAAM,+EAAwB,IAAI,EAAE;AAAA,EAChD;AAEA,SAAO,gBAAgB,IAAI;AAC7B;AAEA,SAAS,WAAW,MAAY,gBAAwC,CAAC,GAAG;AAC1E,QAAM,qBAA2C;AAAA,IAC/C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAElE,MAAI,EAAE,QAAQ,kBAAkB;AAC9B,UAAM,IAAI,MAAM,+EAAwB,IAAI,EAAE;AAAA,EAChD;AAEA,SAAO,gBAAgB,IAAI;AAC7B;AAEA,SAAS,mBAAmB,OAAiB;AAC3C,QAAM,kBAA4C;AAAA,IAChD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,EAAE,SAAS,kBAAkB;AAC/B,UAAM,IAAI,MAAM,gFAAyB,KAAK,EAAE;AAAA,EAClD;AAEA,SAAO,gBAAgB,KAAK;AAC9B;AAEA,SAAS,oBAAoB,OAAiB;AAC5C,QAAM,eAAyC;AAAA,IAC7C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,EAAE,SAAS,eAAe;AAC5B,UAAM,IAAI,MAAM,gFAAyB,KAAK,EAAE;AAAA,EAClD;AAEA,SAAO,aAAa,KAAK;AAC3B;AAEA,IAAM,kBAAkB,CAAC,EAAE,OAAO,WAAW,KAAK,MAAiD;AACjG,QAAM,mBAAgE;AAAA,IACpE,IAAI;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,IAAI;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EACF;AAEA,MAAI,EAAE,YAAY,mBAAmB;AACnC,UAAM,IAAI,MAAM,mFAA4B,QAAQ,EAAE;AAAA,EACxD;AAEA,MAAI,EAAE,SAAS,iBAAiB,QAAQ,IAAI;AAC1C,UAAM,IAAI,MAAM,gFAAyB,KAAK,EAAE;AAAA,EAClD;AAEA,SAAO,iBAAiB,QAAQ,EAAE,KAAK;AACzC;AAEO,IAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AACb;","names":[]}
+{"version":3,"sources":["../src/DomainFormat.ts"],"sourcesContent":["export type Mode = 'H' | 'C' | 'W';\nexport type Wind = 1 | 2 | 3;\nexport type AirLevel = 1 | 2 | 3 | 4 | 5;\nexport type UserLevel = '1' | '2' | '3' | '4';\nexport type Language = 'en' | 'ko';\n\nfunction formatModeName(mode: Mode, customMapping: Record<string, string> = {}): string {\n  const defaultModeMapping: Record<Mode, string> = {\n    H: '난방',\n    C: '냉방',\n    W: '송풍',\n  };\n\n  const combinedMapping = { ...defaultModeMapping, ...customMapping };\n\n  if (!(mode in combinedMapping)) {\n    throw new Error(`지원하지 않는 모드입니다. mode: ${mode}`);\n  }\n\n  return combinedMapping[mode];\n}\n\nfunction formatModeColor(mode: Mode, customMapping: Record<string, string> = {}) {\n  const defaultColorMapping: Record<Mode, string> = {\n    H: '#e77676',\n    C: '#9fc6ff',\n    W: '#a8e379',\n  };\n\n  const combinedMapping = { ...defaultColorMapping, ...customMapping };\n\n  if (!(mode in combinedMapping)) {\n    throw new Error(`지원하지 않는 모드입니다. mode: ${mode}`);\n  }\n\n  return combinedMapping[mode];\n}\n\nfunction formatWind(wind: Wind, customMapping: Record<string, string> = {}) {\n  const defaultWindMapping: Record<Wind, string> = {\n    1: '약풍',\n    2: '중풍',\n    3: '강풍',\n  };\n\n  const combinedMapping = { ...defaultWindMapping, ...customMapping };\n\n  if (!(wind in combinedMapping)) {\n    throw new Error(`지원하지 않는 풍량입니다. wind: ${wind}`);\n  }\n\n  return combinedMapping[wind];\n}\n\nfunction formatAirLevelName(level: AirLevel) {\n  const airLevelMapping: Record<AirLevel, string> = {\n    1: '매우 나쁨',\n    2: '나쁨',\n    3: '보통',\n    4: '좋음',\n    5: '매우 좋음',\n  };\n\n  if (!(level in airLevelMapping)) {\n    throw new Error(`지원하지 않는 레벨입니다. level: ${level}`);\n  }\n\n  return airLevelMapping[level];\n}\n\nfunction formatAirLevelColor(level: AirLevel) {\n  const colorMapping: Record<AirLevel, string> = {\n    1: '#ff5d47',\n    2: '#ff961c',\n    3: '#ffca42',\n    4: '#63ff60',\n    5: '#49ffe9',\n  };\n\n  if (!(level in colorMapping)) {\n    throw new Error(`지원하지 않는 레벨입니다. level: ${level}`);\n  }\n\n  return colorMapping[level];\n}\n\nconst formatUserLevel = ({ level, language = 'ko' }: { level: UserLevel; language?: Language }) => {\n  const userLevelMapping: Record<Language, Record<UserLevel, string>> = {\n    en: {\n      '1': 'MASTER',\n      '2': 'MASTER KID',\n      '3': 'SENIOR',\n      '4': 'JUNIOR',\n    },\n    ko: {\n      '1': '마스터',\n      '2': '마스터키즈',\n      '3': '시니어',\n      '4': '주니어',\n    },\n  };\n\n  if (!(language in userLevelMapping)) {\n    throw new Error(`지원하지 않는 언어입니다. language: ${language}`);\n  }\n\n  if (!(level in userLevelMapping[language])) {\n    throw new Error(`지원하지 않는 레벨입니다. level: ${level}`);\n  }\n\n  return userLevelMapping[language][level];\n};\n\nexport const DomainFormat = {\n  modeName: formatModeName,\n  modeColor: formatModeColor,\n  wind: formatWind,\n  airLevelName: formatAirLevelName,\n  airLevelColor: formatAirLevelColor,\n  userLevel: formatUserLevel,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,SAAS,eAAe,MAAY,gBAAwC,CAAC,GAAW;AACtF,QAAM,qBAA2C;AAAA,IAC/C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAElE,MAAI,EAAE,QAAQ,kBAAkB;AAC9B,UAAM,IAAI,MAAM,+EAAwB,IAAI,EAAE;AAAA,EAChD;AAEA,SAAO,gBAAgB,IAAI;AAC7B;AAEA,SAAS,gBAAgB,MAAY,gBAAwC,CAAC,GAAG;AAC/E,QAAM,sBAA4C;AAAA,IAChD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,EAAE,GAAG,qBAAqB,GAAG,cAAc;AAEnE,MAAI,EAAE,QAAQ,kBAAkB;AAC9B,UAAM,IAAI,MAAM,+EAAwB,IAAI,EAAE;AAAA,EAChD;AAEA,SAAO,gBAAgB,IAAI;AAC7B;AAEA,SAAS,WAAW,MAAY,gBAAwC,CAAC,GAAG;AAC1E,QAAM,qBAA2C;AAAA,IAC/C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,kBAAkB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAElE,MAAI,EAAE,QAAQ,kBAAkB;AAC9B,UAAM,IAAI,MAAM,+EAAwB,IAAI,EAAE;AAAA,EAChD;AAEA,SAAO,gBAAgB,IAAI;AAC7B;AAEA,SAAS,mBAAmB,OAAiB;AAC3C,QAAM,kBAA4C;AAAA,IAChD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,EAAE,SAAS,kBAAkB;AAC/B,UAAM,IAAI,MAAM,gFAAyB,KAAK,EAAE;AAAA,EAClD;AAEA,SAAO,gBAAgB,KAAK;AAC9B;AAEA,SAAS,oBAAoB,OAAiB;AAC5C,QAAM,eAAyC;AAAA,IAC7C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,EAAE,SAAS,eAAe;AAC5B,UAAM,IAAI,MAAM,gFAAyB,KAAK,EAAE;AAAA,EAClD;AAEA,SAAO,aAAa,KAAK;AAC3B;AAEA,IAAM,kBAAkB,CAAC,EAAE,OAAO,WAAW,KAAK,MAAiD;AACjG,QAAM,mBAAgE;AAAA,IACpE,IAAI;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,IAAI;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EACF;AAEA,MAAI,EAAE,YAAY,mBAAmB;AACnC,UAAM,IAAI,MAAM,mFAA4B,QAAQ,EAAE;AAAA,EACxD;AAEA,MAAI,EAAE,SAAS,iBAAiB,QAAQ,IAAI;AAC1C,UAAM,IAAI,MAAM,gFAAyB,KAAK,EAAE;AAAA,EAClD;AAEA,SAAO,iBAAiB,QAAQ,EAAE,KAAK;AACzC;AAEO,IAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AACb;","names":[]}

package/dist/DomainFormat.mjs

@@ -1,6 +1,6 @@
 import {
   DomainFormat
-} from "./chunk-WWR7M6ID.mjs";
+} from "./chunk-QBUE5UFO.mjs";
 export {
   DomainFormat
 };

package/dist/Flex.js

@@ -43,7 +43,7 @@ function coerceCssPixelValue(value) {
 }
 
 // src/Flex.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 var Flex = (0, import_react.memo)(function Flex2(props) {
   const {
     gap = 0,

package/dist/Flex.mjs

@@ -1,7 +1,7 @@
 import {
   Container,
   Flex
-} from "./chunk-QKAXJVK7.mjs";
+} from "./chunk-KQN75INR.mjs";
 import "./chunk-OQ3L65JI.mjs";
 export {
   Container,

package/dist/Grid/Grid.js

@@ -0,0 +1,212 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/Grid.tsx
+var Grid_exports = {};
+__export(Grid_exports, {
+  Grid: () => Grid
+});
+module.exports = __toCommonJS(Grid_exports);
+var import_react3 = require("react");
+
+// src/Grid/utils.ts
+var packageName = "--utils";
+var createCssVar = (key, value) => {
+  const suffix = value ? `-${value}` : "";
+  return `${packageName}-${key}${suffix}`;
+};
+var formatGridFlow = (flow) => {
+  if (!flow) return void 0;
+  const flowParts = flow.split("-");
+  return flowParts.length > 1 ? flowParts.join(" ") : flow;
+};
+
+// src/Grid/constants.ts
+var GRID = "grid";
+var GRID_ITEM = "grid-item";
+var gridAlignVar = createCssVar(GRID, "align");
+var gridGapVar = createCssVar(GRID, "gap");
+var gridColumnsVar = createCssVar(GRID, "columns");
+var gridRowsVar = createCssVar(GRID, "rows");
+var gridAreasVar = createCssVar(GRID, "areas");
+var gridFlowVar = createCssVar(GRID, "flow");
+var gridJustifyVar = createCssVar(GRID, "justify");
+var gridItemAreaVar = createCssVar(GRID_ITEM, "area");
+var gridItemColumnStartVar = createCssVar(GRID_ITEM, "column-start");
+var gridItemColumnEndVar = createCssVar(GRID_ITEM, "column-end");
+var gridItemRowStartVar = createCssVar(GRID_ITEM, "row-start");
+var gridItemRowEndVar = createCssVar(GRID_ITEM, "row-end");
+var hasGridAreasAttributeKey = "data-grid-has-areas";
+var gridAreasAttribute = {
+  key: hasGridAreasAttributeKey,
+  set: (areas) => ({
+    [hasGridAreasAttributeKey]: areas != null ? "true" : "false"
+  }),
+  hasAreasSelector: `[${hasGridAreasAttributeKey}="true"]`
+};
+var hasGridAreaAttributeKey = "data-grid-item-has-grid-area";
+var gridAreaAttribute = {
+  key: hasGridAreaAttributeKey,
+  set: (area) => ({
+    [hasGridAreaAttributeKey]: area != null ? "true" : "false"
+  }),
+  hasAreaSelector: `[${hasGridAreaAttributeKey}="true"]`,
+  noAreaSelector: `[${hasGridAreaAttributeKey}="false"]`
+};
+
+// src/Grid/styles.ts
+var import_react = require("@emotion/react");
+
+// src/getVar.ts
+function getVar(variable, defaultValue) {
+  if (defaultValue) {
+    return `var(${variable}, ${defaultValue})`;
+  }
+  return `var(${variable})`;
+}
+
+// src/Grid/styles.ts
+var gridCss = (0, import_react.css)({
+  gap: getVar(gridGapVar),
+  gridTemplateColumns: getVar(gridColumnsVar),
+  gridTemplateRows: getVar(gridRowsVar),
+  gridTemplateAreas: getVar(gridAreasVar),
+  gridAutoFlow: getVar(gridFlowVar),
+  alignItems: getVar(gridAlignVar),
+  justifyContent: getVar(gridJustifyVar)
+});
+var gridItemCss = (0, import_react.css)({
+  [`&${gridAreasAttribute.hasAreasSelector}`]: {
+    [`&${gridAreaAttribute.hasAreaSelector}`]: {
+      gridArea: getVar(gridItemAreaVar)
+    }
+  },
+  [`&${gridAreaAttribute.noAreaSelector}`]: {
+    gridColumnStart: getVar(gridItemColumnStartVar),
+    gridColumnEnd: getVar(gridItemColumnEndVar),
+    gridRowStart: getVar(gridItemRowStartVar),
+    gridRowEnd: getVar(gridItemRowEndVar)
+  }
+});
+
+// src/coerceCssPixelValue.ts
+function coerceCssPixelValue(value) {
+  return typeof value === "string" ? value : `${value}px`;
+}
+
+// src/createContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function createContext(rootComponentName, defaultContext) {
+  const Context = (0, import_react2.createContext)(defaultContext);
+  function Provider(props) {
+    const { children, ...contextValues } = props;
+    const value = (0, import_react2.useMemo)(() => contextValues, [contextValues]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
+  }
+  function useContext(consumerName) {
+    const context = (0, import_react2.useContext)(Context);
+    if (context == null) {
+      throw new Error(`${consumerName}\uC740 ${rootComponentName}\uD558\uC704\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.`);
+    }
+    return context;
+  }
+  Provider.displayName = `${rootComponentName}Provider`;
+  return [Provider, useContext];
+}
+
+// src/Grid/context.ts
+var [GridProvider, useGridContext] = createContext("Grid");
+
+// src/Grid/Grid.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+var GridImpl = (0, import_react3.forwardRef)((props, ref) => {
+  const {
+    as: Component = "div",
+    inline = false,
+    gap = 0,
+    columns = "auto",
+    rows = "auto",
+    align = "stretch",
+    justify = "normal",
+    areas,
+    flow,
+    style: styleFromProps,
+    children,
+    ...restProps
+  } = props;
+  const gridStyles = {
+    display: inline ? "inline-grid" : "grid",
+    [gridGapVar]: coerceCssPixelValue(gap),
+    [gridColumnsVar]: Array.isArray(columns) ? columns.join(" ") : columns,
+    [gridRowsVar]: Array.isArray(rows) ? rows.join(" ") : rows,
+    [gridAlignVar]: align,
+    [gridFlowVar]: formatGridFlow(flow),
+    [gridAreasVar]: areas,
+    [gridJustifyVar]: justify,
+    ...styleFromProps
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GridProvider, { areas, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, style: gridStyles, css: gridCss, ...restProps, children }) });
+});
+var GridItem = (0, import_react3.forwardRef)((props, ref) => {
+  const {
+    as: Component = "div",
+    gridArea,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRow,
+    gridRowStart,
+    gridRowEnd,
+    style: styleFromProps,
+    children,
+    ...restProps
+  } = props;
+  const { areas } = useGridContext("Grid.Item");
+  const [columnStart, columnEnd] = Array.isArray(gridColumn) ? gridColumn : gridColumn?.split("/")?.map((str) => str.trim()) ?? [];
+  const [rowStart, rowEnd] = Array.isArray(gridRow) ? gridRow : gridRow?.split("/")?.map((str) => str.trim()) ?? [];
+  const gridItemStyles = {
+    [gridItemAreaVar]: gridArea,
+    [gridItemColumnStartVar]: columnStart ?? gridColumnStart,
+    [gridItemColumnEndVar]: columnEnd ?? gridColumnEnd,
+    [gridItemRowStartVar]: rowStart ?? gridRowStart,
+    [gridItemRowEndVar]: rowEnd ?? gridRowEnd,
+    ...styleFromProps
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      ref,
+      css: gridItemCss,
+      style: gridItemStyles,
+      ...gridAreasAttribute.set(areas),
+      ...gridAreaAttribute.set(gridArea),
+      ...restProps,
+      children
+    }
+  );
+});
+var Grid = Object.assign(GridImpl, {
+  Item: GridItem
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Grid
+});
+//# sourceMappingURL=Grid.js.map

package/dist/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/Grid.tsx","../../src/Grid/utils.ts","../../src/Grid/constants.ts","../../src/Grid/styles.ts","../../src/getVar.ts","../../src/coerceCssPixelValue.ts","../../src/createContext.tsx","../../src/Grid/context.ts"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  gridAlignVar,\n  gridGapVar,\n  gridColumnsVar,\n  gridRowsVar,\n  gridFlowVar,\n  gridItemAreaVar,\n  gridItemColumnEndVar,\n  gridItemColumnStartVar,\n  gridItemRowEndVar,\n  gridItemRowStartVar,\n  gridAreasVar,\n  gridAreaAttribute,\n  gridAreasAttribute,\n  gridJustifyVar,\n} from './constants';\nimport { gridCss, gridItemCss } from './styles';\nimport type { GridItemProps, GridProps } from './types';\nimport { coerceCssPixelValue } from '../coerceCssPixelValue';\nimport { GridProvider, useGridContext } from './context';\nimport { formatGridFlow } from './utils';\n\nconst GridImpl = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const {\n    as: Component = 'div',\n    inline = false,\n    gap = 0,\n    columns = 'auto',\n    rows = 'auto',\n    align = 'stretch',\n    justify = 'normal',\n    areas,\n    flow,\n    style: styleFromProps,\n    children,\n    ...restProps\n  } = props;\n\n  const gridStyles = {\n    display: inline ? 'inline-grid' : 'grid',\n    [gridGapVar]: coerceCssPixelValue(gap),\n    [gridColumnsVar]: Array.isArray(columns) ? columns.join(' ') : columns,\n    [gridRowsVar]: Array.isArray(rows) ? rows.join(' ') : rows,\n    [gridAlignVar]: align,\n    [gridFlowVar]: formatGridFlow(flow),\n    [gridAreasVar]: areas,\n    [gridJustifyVar]: justify,\n    ...styleFromProps,\n  };\n\n  return (\n    <GridProvider areas={areas}>\n      <Component ref={ref} style={gridStyles} css={gridCss} {...restProps}>\n        {children}\n      </Component>\n    </GridProvider>\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const {\n    as: Component = 'div',\n    gridArea,\n    gridColumn,\n    gridColumnStart,\n    gridColumnEnd,\n    gridRow,\n    gridRowStart,\n    gridRowEnd,\n    style: styleFromProps,\n    children,\n    ...restProps\n  } = props;\n\n  const { areas } = useGridContext('Grid.Item');\n\n  const [columnStart, columnEnd] = Array.isArray(gridColumn)\n    ? gridColumn\n    : gridColumn?.split('/')?.map((str) => str.trim()) ?? [];\n\n  const [rowStart, rowEnd] = Array.isArray(gridRow)\n    ? gridRow\n    : gridRow?.split('/')?.map((str) => str.trim()) ?? [];\n\n  const gridItemStyles = {\n    [gridItemAreaVar]: gridArea,\n    [gridItemColumnStartVar]: columnStart ?? gridColumnStart,\n    [gridItemColumnEndVar]: columnEnd ?? gridColumnEnd,\n    [gridItemRowStartVar]: rowStart ?? gridRowStart,\n    [gridItemRowEndVar]: rowEnd ?? gridRowEnd,\n    ...styleFromProps,\n  };\n\n  return (\n    <Component\n      ref={ref}\n      css={gridItemCss}\n      style={gridItemStyles}\n      {...gridAreasAttribute.set(areas)}\n      {...gridAreaAttribute.set(gridArea)}\n      {...restProps}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport const Grid = Object.assign(GridImpl, {\n  Item: GridItem,\n});\n","const packageName = '--utils';\n\ntype CssVar<T extends string, U extends string | undefined = undefined> = U extends undefined\n  ? `${typeof packageName}-${T}`\n  : `${typeof packageName}-${T}-${U}`;\n\nexport const createCssVar = <T extends string, U extends string | undefined = undefined>(\n  key: T,\n  value?: U\n): CssVar<T, U> => {\n  const suffix = value ? `-${value}` : '';\n  return `${packageName}-${key}${suffix}` as CssVar<T, U>;\n};\nexport const formatGridFlow = (flow: string | undefined) => {\n  if (!flow) return undefined;\n  const flowParts = flow.split('-');\n\n  return flowParts.length > 1 ? flowParts.join(' ') : flow;\n};\n","import { createCssVar } from './utils';\n\nconst GRID = 'grid';\nconst GRID_ITEM = 'grid-item';\n\nexport const gridAlignVar = createCssVar(GRID, 'align');\nexport const gridGapVar = createCssVar(GRID, 'gap');\nexport const gridColumnsVar = createCssVar(GRID, 'columns');\nexport const gridRowsVar = createCssVar(GRID, 'rows');\nexport const gridAreasVar = createCssVar(GRID, 'areas');\nexport const gridFlowVar = createCssVar(GRID, 'flow');\nexport const gridJustifyVar = createCssVar(GRID, 'justify');\n\nexport const gridItemAreaVar = createCssVar(GRID_ITEM, 'area');\nexport const gridItemColumnStartVar = createCssVar(GRID_ITEM, 'column-start');\nexport const gridItemColumnEndVar = createCssVar(GRID_ITEM, 'column-end');\nexport const gridItemRowStartVar = createCssVar(GRID_ITEM, 'row-start');\nexport const gridItemRowEndVar = createCssVar(GRID_ITEM, 'row-end');\n\nconst hasGridAreasAttributeKey = 'data-grid-has-areas';\nexport const gridAreasAttribute = {\n  key: hasGridAreasAttributeKey,\n\n  set: (areas?: string) => ({\n    [hasGridAreasAttributeKey]: areas != null ? 'true' : 'false',\n  }),\n\n  hasAreasSelector: `[${hasGridAreasAttributeKey}=\"true\"]`,\n};\n\nconst hasGridAreaAttributeKey = 'data-grid-item-has-grid-area';\nexport const gridAreaAttribute = {\n  key: hasGridAreaAttributeKey,\n\n  set: (area?: string) => ({\n    [hasGridAreaAttributeKey]: area != null ? 'true' : 'false',\n  }),\n\n  hasAreaSelector: `[${hasGridAreaAttributeKey}=\"true\"]`,\n  noAreaSelector: `[${hasGridAreaAttributeKey}=\"false\"]`,\n};\n","import { css } from '@emotion/react';\n\nimport {\n  gridAlignVar,\n  gridGapVar,\n  gridColumnsVar,\n  gridRowsVar,\n  gridAreasVar,\n  gridFlowVar,\n  gridItemAreaVar,\n  gridItemColumnEndVar,\n  gridItemColumnStartVar,\n  gridItemRowEndVar,\n  gridItemRowStartVar,\n  gridAreaAttribute,\n  gridAreasAttribute,\n  gridJustifyVar,\n} from './constants';\nimport { getVar } from '../getVar';\n\nexport const gridCss = css({\n  gap: getVar(gridGapVar),\n  gridTemplateColumns: getVar(gridColumnsVar),\n  gridTemplateRows: getVar(gridRowsVar),\n  gridTemplateAreas: getVar(gridAreasVar),\n  gridAutoFlow: getVar(gridFlowVar),\n  alignItems: getVar(gridAlignVar),\n  justifyContent: getVar(gridJustifyVar),\n});\n\nexport const gridItemCss = css({\n  [`&${gridAreasAttribute.hasAreasSelector}`]: {\n    [`&${gridAreaAttribute.hasAreaSelector}`]: {\n      gridArea: getVar(gridItemAreaVar),\n    },\n  },\n\n  [`&${gridAreaAttribute.noAreaSelector}`]: {\n    gridColumnStart: getVar(gridItemColumnStartVar),\n    gridColumnEnd: getVar(gridItemColumnEndVar),\n    gridRowStart: getVar(gridItemRowStartVar),\n    gridRowEnd: getVar(gridItemRowEndVar),\n  },\n});\n","export type VariableType = `--${string}`;\n\nexport function getVar(variable: VariableType, defaultValue?: string) {\n  if (defaultValue) {\n    return `var(${variable}, ${defaultValue})`;\n  }\n\n  return `var(${variable})`;\n}\n","export type CSSPixelValue = string | number;\n\nexport function coerceCssPixelValue(value: CSSPixelValue): string {\n  return typeof value === 'string' ? value : `${value}px`;\n}\n","import {\n  useMemo,\n  createContext as createContextRaw,\n  useContext as useContextRaw,\n  type PropsWithChildren,\n} from 'react';\n\nexport function createContext<ContextValueType extends object | null>(\n  rootComponentName: string,\n  defaultContext?: ContextValueType\n) {\n  const Context = createContextRaw<ContextValueType | undefined>(defaultContext);\n\n  function Provider(props: PropsWithChildren<ContextValueType>) {\n    const { children, ...contextValues } = props;\n\n    const value = useMemo(() => contextValues, [contextValues]) as ContextValueType;\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  }\n\n  function useContext(consumerName: string) {\n    const context = useContextRaw(Context);\n    if (context == null) {\n      throw new Error(`${consumerName}은 ${rootComponentName}하위에서 사용해야 합니다.`);\n    }\n\n    return context;\n  }\n\n  Provider.displayName = `${rootComponentName}Provider`;\n  return [Provider, useContext] as const;\n}\n","import { createContext } from '../createContext';\n\nexport type GridContext = {\n  areas?: string;\n};\n\nexport const [GridProvider, useGridContext] = createContext<GridContext>('Grid');\n"],"mappings":"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","names":["import_react","import_react","createContextRaw","useContextRaw","import_jsx_runtime"]}

package/dist/Grid/Grid.mjs

@@ -0,0 +1,14 @@
+import {
+  Grid
+} from "../chunk-IA3Y652S.mjs";
+import "../chunk-ODQE5YIS.mjs";
+import "../chunk-6ZISNSYZ.mjs";
+import "../chunk-KIWMNTMS.mjs";
+import "../chunk-P3MUNLIM.mjs";
+import "../chunk-6S7STXJR.mjs";
+import "../chunk-Z4UXDD2C.mjs";
+import "../chunk-OQ3L65JI.mjs";
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.mjs.map

package/dist/Grid/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Grid/constants.js

@@ -0,0 +1,96 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  gridAlignVar: () => gridAlignVar,
+  gridAreaAttribute: () => gridAreaAttribute,
+  gridAreasAttribute: () => gridAreasAttribute,
+  gridAreasVar: () => gridAreasVar,
+  gridColumnsVar: () => gridColumnsVar,
+  gridFlowVar: () => gridFlowVar,
+  gridGapVar: () => gridGapVar,
+  gridItemAreaVar: () => gridItemAreaVar,
+  gridItemColumnEndVar: () => gridItemColumnEndVar,
+  gridItemColumnStartVar: () => gridItemColumnStartVar,
+  gridItemRowEndVar: () => gridItemRowEndVar,
+  gridItemRowStartVar: () => gridItemRowStartVar,
+  gridJustifyVar: () => gridJustifyVar,
+  gridRowsVar: () => gridRowsVar
+});
+module.exports = __toCommonJS(constants_exports);
+
+// src/Grid/utils.ts
+var packageName = "--utils";
+var createCssVar = (key, value) => {
+  const suffix = value ? `-${value}` : "";
+  return `${packageName}-${key}${suffix}`;
+};
+
+// src/Grid/constants.ts
+var GRID = "grid";
+var GRID_ITEM = "grid-item";
+var gridAlignVar = createCssVar(GRID, "align");
+var gridGapVar = createCssVar(GRID, "gap");
+var gridColumnsVar = createCssVar(GRID, "columns");
+var gridRowsVar = createCssVar(GRID, "rows");
+var gridAreasVar = createCssVar(GRID, "areas");
+var gridFlowVar = createCssVar(GRID, "flow");
+var gridJustifyVar = createCssVar(GRID, "justify");
+var gridItemAreaVar = createCssVar(GRID_ITEM, "area");
+var gridItemColumnStartVar = createCssVar(GRID_ITEM, "column-start");
+var gridItemColumnEndVar = createCssVar(GRID_ITEM, "column-end");
+var gridItemRowStartVar = createCssVar(GRID_ITEM, "row-start");
+var gridItemRowEndVar = createCssVar(GRID_ITEM, "row-end");
+var hasGridAreasAttributeKey = "data-grid-has-areas";
+var gridAreasAttribute = {
+  key: hasGridAreasAttributeKey,
+  set: (areas) => ({
+    [hasGridAreasAttributeKey]: areas != null ? "true" : "false"
+  }),
+  hasAreasSelector: `[${hasGridAreasAttributeKey}="true"]`
+};
+var hasGridAreaAttributeKey = "data-grid-item-has-grid-area";
+var gridAreaAttribute = {
+  key: hasGridAreaAttributeKey,
+  set: (area) => ({
+    [hasGridAreaAttributeKey]: area != null ? "true" : "false"
+  }),
+  hasAreaSelector: `[${hasGridAreaAttributeKey}="true"]`,
+  noAreaSelector: `[${hasGridAreaAttributeKey}="false"]`
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  gridAlignVar,
+  gridAreaAttribute,
+  gridAreasAttribute,
+  gridAreasVar,
+  gridColumnsVar,
+  gridFlowVar,
+  gridGapVar,
+  gridItemAreaVar,
+  gridItemColumnEndVar,
+  gridItemColumnStartVar,
+  gridItemRowEndVar,
+  gridItemRowStartVar,
+  gridJustifyVar,
+  gridRowsVar
+});
+//# sourceMappingURL=constants.js.map

package/dist/Grid/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/constants.ts","../../src/Grid/utils.ts"],"sourcesContent":["import { createCssVar } from './utils';\n\nconst GRID = 'grid';\nconst GRID_ITEM = 'grid-item';\n\nexport const gridAlignVar = createCssVar(GRID, 'align');\nexport const gridGapVar = createCssVar(GRID, 'gap');\nexport const gridColumnsVar = createCssVar(GRID, 'columns');\nexport const gridRowsVar = createCssVar(GRID, 'rows');\nexport const gridAreasVar = createCssVar(GRID, 'areas');\nexport const gridFlowVar = createCssVar(GRID, 'flow');\nexport const gridJustifyVar = createCssVar(GRID, 'justify');\n\nexport const gridItemAreaVar = createCssVar(GRID_ITEM, 'area');\nexport const gridItemColumnStartVar = createCssVar(GRID_ITEM, 'column-start');\nexport const gridItemColumnEndVar = createCssVar(GRID_ITEM, 'column-end');\nexport const gridItemRowStartVar = createCssVar(GRID_ITEM, 'row-start');\nexport const gridItemRowEndVar = createCssVar(GRID_ITEM, 'row-end');\n\nconst hasGridAreasAttributeKey = 'data-grid-has-areas';\nexport const gridAreasAttribute = {\n  key: hasGridAreasAttributeKey,\n\n  set: (areas?: string) => ({\n    [hasGridAreasAttributeKey]: areas != null ? 'true' : 'false',\n  }),\n\n  hasAreasSelector: `[${hasGridAreasAttributeKey}=\"true\"]`,\n};\n\nconst hasGridAreaAttributeKey = 'data-grid-item-has-grid-area';\nexport const gridAreaAttribute = {\n  key: hasGridAreaAttributeKey,\n\n  set: (area?: string) => ({\n    [hasGridAreaAttributeKey]: area != null ? 'true' : 'false',\n  }),\n\n  hasAreaSelector: `[${hasGridAreaAttributeKey}=\"true\"]`,\n  noAreaSelector: `[${hasGridAreaAttributeKey}=\"false\"]`,\n};\n","const packageName = '--utils';\n\ntype CssVar<T extends string, U extends string | undefined = undefined> = U extends undefined\n  ? `${typeof packageName}-${T}`\n  : `${typeof packageName}-${T}-${U}`;\n\nexport const createCssVar = <T extends string, U extends string | undefined = undefined>(\n  key: T,\n  value?: U\n): CssVar<T, U> => {\n  const suffix = value ? `-${value}` : '';\n  return `${packageName}-${key}${suffix}` as CssVar<T, U>;\n};\nexport const formatGridFlow = (flow: string | undefined) => {\n  if (!flow) return undefined;\n  const flowParts = flow.split('-');\n\n  return flowParts.length > 1 ? flowParts.join(' ') : flow;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAM,cAAc;AAMb,IAAM,eAAe,CAC1B,KACA,UACiB;AACjB,QAAM,SAAS,QAAQ,IAAI,KAAK,KAAK;AACrC,SAAO,GAAG,WAAW,IAAI,GAAG,GAAG,MAAM;AACvC;;;ADVA,IAAM,OAAO;AACb,IAAM,YAAY;AAEX,IAAM,eAAe,aAAa,MAAM,OAAO;AAC/C,IAAM,aAAa,aAAa,MAAM,KAAK;AAC3C,IAAM,iBAAiB,aAAa,MAAM,SAAS;AACnD,IAAM,cAAc,aAAa,MAAM,MAAM;AAC7C,IAAM,eAAe,aAAa,MAAM,OAAO;AAC/C,IAAM,cAAc,aAAa,MAAM,MAAM;AAC7C,IAAM,iBAAiB,aAAa,MAAM,SAAS;AAEnD,IAAM,kBAAkB,aAAa,WAAW,MAAM;AACtD,IAAM,yBAAyB,aAAa,WAAW,cAAc;AACrE,IAAM,uBAAuB,aAAa,WAAW,YAAY;AACjE,IAAM,sBAAsB,aAAa,WAAW,WAAW;AAC/D,IAAM,oBAAoB,aAAa,WAAW,SAAS;AAElE,IAAM,2BAA2B;AAC1B,IAAM,qBAAqB;AAAA,EAChC,KAAK;AAAA,EAEL,KAAK,CAAC,WAAoB;AAAA,IACxB,CAAC,wBAAwB,GAAG,SAAS,OAAO,SAAS;AAAA,EACvD;AAAA,EAEA,kBAAkB,IAAI,wBAAwB;AAChD;AAEA,IAAM,0BAA0B;AACzB,IAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EAEL,KAAK,CAAC,UAAmB;AAAA,IACvB,CAAC,uBAAuB,GAAG,QAAQ,OAAO,SAAS;AAAA,EACrD;AAAA,EAEA,iBAAiB,IAAI,uBAAuB;AAAA,EAC5C,gBAAgB,IAAI,uBAAuB;AAC7C;","names":[]}

package/dist/Grid/constants.mjs

@@ -0,0 +1,34 @@
+import {
+  gridAlignVar,
+  gridAreaAttribute,
+  gridAreasAttribute,
+  gridAreasVar,
+  gridColumnsVar,
+  gridFlowVar,
+  gridGapVar,
+  gridItemAreaVar,
+  gridItemColumnEndVar,
+  gridItemColumnStartVar,
+  gridItemRowEndVar,
+  gridItemRowStartVar,
+  gridJustifyVar,
+  gridRowsVar
+} from "../chunk-KIWMNTMS.mjs";
+import "../chunk-P3MUNLIM.mjs";
+export {
+  gridAlignVar,
+  gridAreaAttribute,
+  gridAreasAttribute,
+  gridAreasVar,
+  gridColumnsVar,
+  gridFlowVar,
+  gridGapVar,
+  gridItemAreaVar,
+  gridItemColumnEndVar,
+  gridItemColumnStartVar,
+  gridItemRowEndVar,
+  gridItemRowStartVar,
+  gridJustifyVar,
+  gridRowsVar
+};
+//# sourceMappingURL=constants.mjs.map

package/dist/Grid/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Grid/context.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/context.ts
+var context_exports = {};
+__export(context_exports, {
+  GridProvider: () => GridProvider,
+  useGridContext: () => useGridContext
+});
+module.exports = __toCommonJS(context_exports);
+
+// src/createContext.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function createContext(rootComponentName, defaultContext) {
+  const Context = (0, import_react.createContext)(defaultContext);
+  function Provider(props) {
+    const { children, ...contextValues } = props;
+    const value = (0, import_react.useMemo)(() => contextValues, [contextValues]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
+  }
+  function useContext(consumerName) {
+    const context = (0, import_react.useContext)(Context);
+    if (context == null) {
+      throw new Error(`${consumerName}\uC740 ${rootComponentName}\uD558\uC704\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.`);
+    }
+    return context;
+  }
+  Provider.displayName = `${rootComponentName}Provider`;
+  return [Provider, useContext];
+}
+
+// src/Grid/context.ts
+var [GridProvider, useGridContext] = createContext("Grid");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridProvider,
+  useGridContext
+});
+//# sourceMappingURL=context.js.map

package/dist/Grid/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/context.ts","../../src/createContext.tsx"],"sourcesContent":["import { createContext } from '../createContext';\n\nexport type GridContext = {\n  areas?: string;\n};\n\nexport const [GridProvider, useGridContext] = createContext<GridContext>('Grid');\n","import {\n  useMemo,\n  createContext as createContextRaw,\n  useContext as useContextRaw,\n  type PropsWithChildren,\n} from 'react';\n\nexport function createContext<ContextValueType extends object | null>(\n  rootComponentName: string,\n  defaultContext?: ContextValueType\n) {\n  const Context = createContextRaw<ContextValueType | undefined>(defaultContext);\n\n  function Provider(props: PropsWithChildren<ContextValueType>) {\n    const { children, ...contextValues } = props;\n\n    const value = useMemo(() => contextValues, [contextValues]) as ContextValueType;\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  }\n\n  function useContext(consumerName: string) {\n    const context = useContextRaw(Context);\n    if (context == null) {\n      throw new Error(`${consumerName}은 ${rootComponentName}하위에서 사용해야 합니다.`);\n    }\n\n    return context;\n  }\n\n  Provider.displayName = `${rootComponentName}Provider`;\n  return [Provider, useContext] as const;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAKO;AAaI;AAXJ,SAAS,cACd,mBACA,gBACA;AACA,QAAM,cAAU,aAAAA,eAA+C,cAAc;AAE7E,WAAS,SAAS,OAA4C;AAC5D,UAAM,EAAE,UAAU,GAAG,cAAc,IAAI;AAEvC,UAAM,YAAQ,sBAAQ,MAAM,eAAe,CAAC,aAAa,CAAC;AAE1D,WAAO,4CAAC,QAAQ,UAAR,EAAiB,OAAe,UAAS;AAAA,EACnD;AAEA,WAAS,WAAW,cAAsB;AACxC,UAAM,cAAU,aAAAC,YAAc,OAAO;AACrC,QAAI,WAAW,MAAM;AACnB,YAAM,IAAI,MAAM,GAAG,YAAY,UAAK,iBAAiB,uEAAgB;AAAA,IACvE;AAEA,WAAO;AAAA,EACT;AAEA,WAAS,cAAc,GAAG,iBAAiB;AAC3C,SAAO,CAAC,UAAU,UAAU;AAC9B;;;AD1BO,IAAM,CAAC,cAAc,cAAc,IAAI,cAA2B,MAAM;","names":["createContextRaw","useContextRaw"]}

package/dist/Grid/context.mjs

@@ -0,0 +1,10 @@
+import {
+  GridProvider,
+  useGridContext
+} from "../chunk-ODQE5YIS.mjs";
+import "../chunk-6S7STXJR.mjs";
+export {
+  GridProvider,
+  useGridContext
+};
+//# sourceMappingURL=context.mjs.map

package/dist/Grid/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}