@liner-fe/design-token 2.0.57 → 2.0.59

package/global.css

@@ -196,6 +196,93 @@
   --lp-pri-brand-original-alpha-4: rgba(4, 17, 102, 0.04);
   --lp-pri-brand-original-alpha-1: rgba(4, 17, 102, 0.01);
   --lp-pri-brand-original-alpha-0: rgba(4, 17, 102, 0);
+  --lp-sys-radius-xxs: 2;
+  --lp-sys-radius-xs: 4;
+  --lp-sys-radius-s: 6;
+  --lp-sys-radius-m: 8;
+  --lp-sys-radius-l: 10;
+  --lp-sys-radius-xl: 12;
+  --lp-sys-radius-xxl: 200;
+  --lp-pri-size-minus6: -6;
+  --lp-pri-size-minus4: -4;
+  --lp-pri-size-minus2: -2;
+  --lp-pri-size-0: 0;
+  --lp-pri-size-1: 1;
+  --lp-pri-size-2: 2;
+  --lp-pri-size-3: 3;
+  --lp-pri-size-4: 4;
+  --lp-pri-size-6: 6;
+  --lp-pri-size-8: 8;
+  --lp-pri-size-10: 10;
+  --lp-pri-size-12: 12;
+  --lp-pri-size-14: 14;
+  --lp-pri-size-16: 16;
+  --lp-pri-size-18: 18;
+  --lp-pri-size-20: 20;
+  --lp-pri-size-24: 24;
+  --lp-pri-size-32: 32;
+  --lp-pri-size-40: 40;
+  --lp-pri-size-48: 48;
+  --lp-pri-size-56: 56;
+  --lp-pri-size-64: 64;
+  --lp-pri-size-80: 80;
+  --lp-pri-size-100: 100;
+  --lp-pri-size-120: 120;
+  --lp-pri-size-140: 140;
+  --lp-pri-size-160: 160;
+  --lp-pri-size-180: 180;
+  --lp-pri-size-200: 200;
+  --lp-pri-color-opacity-80: 80%;
+  --lp-pri-color-opacity-72: 72%;
+  --lp-pri-color-opacity-64: 64%;
+  --lp-pri-color-opacity-56: 56%;
+  --lp-pri-color-opacity-50: 50%;
+  --lp-pri-color-opacity-48: 48%;
+  --lp-pri-color-opacity-44: 44%;
+  --lp-pri-color-opacity-40: 40%;
+  --lp-pri-color-opacity-36: 36%;
+  --lp-pri-color-opacity-32: 32%;
+  --lp-pri-color-opacity-28: 28%;
+  --lp-pri-color-opacity-24: 24%;
+  --lp-pri-color-opacity-20: 20%;
+  --lp-pri-color-opacity-16: 16%;
+  --lp-pri-color-opacity-12: 12%;
+  --lp-pri-color-opacity-8: 8%;
+  --lp-pri-color-opacity-4: 4%;
+  --lp-pri-color-opacity-1: 1%;
+  --lp-pri-color-opacity-0: 0%;
+  --lp-sys-padding-component-100: 4;
+  --lp-sys-padding-component-200: 8;
+  --lp-sys-padding-component-300: 12;
+  --lp-sys-padding-component-400: 16;
+  --lp-sys-padding-component-500: 20;
+  --lp-sys-padding-component-600: 24;
+  --lp-sys-padding-component-700: 32;
+  --lp-sys-padding-component-800: 40;
+  --lp-sys-padding-component-900: 48;
+  --lp-sys-padding-section-100: 24;
+  --lp-sys-padding-section-200: 32;
+  --lp-sys-padding-section-300: 40;
+  --lp-sys-padding-section-400: 48;
+  --lp-sys-padding-section-500: 56;
+  --lp-sys-padding-section-600: 64;
+  --lp-sys-padding-section-700: 80;
+  --lp-sys-padding-section-800: 100;
+  --lp-sys-padding-section-900: 120;
+  --lp-sys-gap-positive-50: 2;
+  --lp-sys-gap-positive-100: 4;
+  --lp-sys-gap-positive-150: 6;
+  --lp-sys-gap-positive-200: 8;
+  --lp-sys-gap-positive-300: 12;
+  --lp-sys-gap-positive-400: 16;
+  --lp-sys-gap-positive-500: 20;
+  --lp-sys-gap-positive-600: 24;
+  --lp-sys-gap-positive-700: 32;
+  --lp-sys-gap-positive-800: 40;
+  --lp-sys-gap-positive-900: 48;
+  --lp-sys-gap-negative-700: -2;
+  --lp-sys-gap-negative-800: -4;
+  --lp-sys-gap-negative-900: -6;
   --lp-pri-font-size-8: 8px;
   --lp-pri-font-size-11: 11px;
   --lp-pri-font-size-12: 12px;
@@ -550,6 +637,12 @@
   font-weight: var(--lp-pri-font-weight-600);
   line-height: var(--lp-pri-font-lineheight-130);
 }
+:root .lp-sys-typo-caption1-normal-medium {
+  font-family: "Pretendard Variable";
+  font-size: var(--lp-pri-font-size-13);
+  font-weight: var(--lp-pri-font-weight-420);
+  line-height: var(--lp-pri-font-lineheight-130);
+}
 :root .lp-sys-typo-caption1-normal-regular {
   font-family: "Pretendard Variable";
   font-size: var(--lp-pri-font-size-13);
@@ -610,6 +703,7 @@
   --inverse-container-high-hover: var(--lp-pri-gray-cool-900);
   --inverse-container-static-high: var(--lp-pri-gray-cool-250);
   --inverse-container-static-high-hover: var(--lp-pri-gray-cool-350);
+  --inverse-container-highest: var(--lp-pri-gray-cool-920);
   --inverse-fill-mid: var(--lp-pri-gray-cool-light-alpha-24);
   --inverse-fill-mid-hover: var(--lp-pri-gray-cool-light-alpha-0);
   --inverse-label-primary: var(--lp-pri-gray-cool-100);
@@ -686,6 +780,7 @@
   --inverse-container-high-hover: var(--lp-pri-gray-cool-300);
   --inverse-container-static-high: var(--lp-pri-gray-cool-250);
   --inverse-container-static-high-hover: var(--lp-pri-gray-cool-350);
+  --inverse-container-highest: var(--lp-pri-gray-cool-300);
   --inverse-fill-mid: var(--lp-pri-achromatic-white);
   --inverse-fill-mid-hover: var(--lp-pri-gray-cool-970);
   --inverse-label-primary: var(--lp-pri-achromatic-white);

package/lib/design/gap/index.d.ts

@@ -0,0 +1,16 @@
+export declare const gap: {
+    readonly 'lp-sys-gap-positive-50': 2;
+    readonly 'lp-sys-gap-positive-100': 4;
+    readonly 'lp-sys-gap-positive-150': 6;
+    readonly 'lp-sys-gap-positive-200': 8;
+    readonly 'lp-sys-gap-positive-300': 12;
+    readonly 'lp-sys-gap-positive-400': 16;
+    readonly 'lp-sys-gap-positive-500': 20;
+    readonly 'lp-sys-gap-positive-600': 24;
+    readonly 'lp-sys-gap-positive-700': 32;
+    readonly 'lp-sys-gap-positive-800': 40;
+    readonly 'lp-sys-gap-positive-900': 48;
+    readonly 'lp-sys-gap-negative-700': -2;
+    readonly 'lp-sys-gap-negative-800': -4;
+    readonly 'lp-sys-gap-negative-900': -6;
+};

package/lib/design/opacity/index.d.ts

@@ -1,14 +1,21 @@
 export declare const opacity: {
-    'lp-pri-90': string;
-    'lp-pri-80': string;
-    'lp-pri-70': string;
-    'lp-pri-60': string;
-    'lp-pri-50': string;
-    'lp-pri-40': string;
-    'lp-pri-30': string;
-    'lp-pri-20': string;
-    'lp-pri-12': string;
-    'lp-pri-8': string;
-    'lp-pri-5': string;
-    'lp-pri-0': string;
+    readonly 'lp-pri-color-opacity-80': "80%";
+    readonly 'lp-pri-color-opacity-72': "72%";
+    readonly 'lp-pri-color-opacity-64': "64%";
+    readonly 'lp-pri-color-opacity-56': "56%";
+    readonly 'lp-pri-color-opacity-50': "50%";
+    readonly 'lp-pri-color-opacity-48': "48%";
+    readonly 'lp-pri-color-opacity-44': "44%";
+    readonly 'lp-pri-color-opacity-40': "40%";
+    readonly 'lp-pri-color-opacity-36': "36%";
+    readonly 'lp-pri-color-opacity-32': "32%";
+    readonly 'lp-pri-color-opacity-28': "28%";
+    readonly 'lp-pri-color-opacity-24': "24%";
+    readonly 'lp-pri-color-opacity-20': "20%";
+    readonly 'lp-pri-color-opacity-16': "16%";
+    readonly 'lp-pri-color-opacity-12': "12%";
+    readonly 'lp-pri-color-opacity-8': "8%";
+    readonly 'lp-pri-color-opacity-4': "4%";
+    readonly 'lp-pri-color-opacity-1': "1%";
+    readonly 'lp-pri-color-opacity-0': "0%";
 };

package/lib/design/padding/index.d.ts

@@ -0,0 +1,20 @@
+export declare const padding: {
+    readonly 'lp-sys-padding-component-100': 4;
+    readonly 'lp-sys-padding-component-200': 8;
+    readonly 'lp-sys-padding-component-300': 12;
+    readonly 'lp-sys-padding-component-400': 16;
+    readonly 'lp-sys-padding-component-500': 20;
+    readonly 'lp-sys-padding-component-600': 24;
+    readonly 'lp-sys-padding-component-700': 32;
+    readonly 'lp-sys-padding-component-800': 40;
+    readonly 'lp-sys-padding-component-900': 48;
+    readonly 'lp-sys-padding-section-100': 24;
+    readonly 'lp-sys-padding-section-200': 32;
+    readonly 'lp-sys-padding-section-300': 40;
+    readonly 'lp-sys-padding-section-400': 48;
+    readonly 'lp-sys-padding-section-500': 56;
+    readonly 'lp-sys-padding-section-600': 64;
+    readonly 'lp-sys-padding-section-700': 80;
+    readonly 'lp-sys-padding-section-800': 100;
+    readonly 'lp-sys-padding-section-900': 120;
+};

package/lib/design/radius/type.d.ts

@@ -1,10 +1,10 @@
 import { ISize } from '../size/type';
 export interface IRadius {
-    'lp-sys-xxs': ISize.lp_pri_2;
-    'lp-sys-xs': ISize.lp_pri_4;
-    'lp-sys-s': ISize.lp_pri_6;
-    'lp-sys-m': ISize.lp_pri_8;
-    'lp-sys-l': ISize.lp_pri_10;
-    'lp-sys-xl': ISize.lp_pri_12;
-    'lp-sys-xxl': ISize.lp_pri_200;
+    'lp-sys-radius-xxs': (typeof ISize)['lp-pri-size-2'];
+    'lp-sys-radius-xs': (typeof ISize)['lp-pri-size-4'];
+    'lp-sys-radius-s': (typeof ISize)['lp-pri-size-6'];
+    'lp-sys-radius-m': (typeof ISize)['lp-pri-size-8'];
+    'lp-sys-radius-l': (typeof ISize)['lp-pri-size-10'];
+    'lp-sys-radius-xl': (typeof ISize)['lp-pri-size-12'];
+    'lp-sys-radius-xxl': (typeof ISize)['lp-pri-size-200'];
 }

package/lib/design/size/index.d.ts

@@ -1,2 +1,2 @@
 import { ISize } from './type';
-export declare const size: Record<keyof typeof ISize, ISize>;
+export declare const size: Record<keyof typeof ISize, (typeof ISize)[keyof typeof ISize]>;

package/lib/design/size/type.d.ts

@@ -1,28 +1,31 @@
-export declare enum ISize {
-    'lp_pri_0' = 0,
-    'lp_pri_1' = 1,
-    'lp_pri_2' = 2,
-    'lp_pri_3' = 3,
-    'lp_pri_4' = 4,
-    'lp_pri_6' = 6,
-    'lp_pri_8' = 8,
-    'lp_pri_10' = 10,
-    'lp_pri_12' = 12,
-    'lp_pri_14' = 14,
-    'lp_pri_16' = 16,
-    'lp_pri_18' = 18,
-    'lp_pri_20' = 20,
-    'lp_pri_24' = 24,
-    'lp_pri_32' = 32,
-    'lp_pri_40' = 40,
-    'lp_pri_48' = 48,
-    'lp_pri_56' = 56,
-    'lp_pri_64' = 64,
-    'lp_pri_80' = 80,
-    'lp_pri_100' = 100,
-    'lp_pri_120' = 120,
-    'lp_pri_140' = 140,
-    'lp_pri_160' = 160,
-    'lp_pri_180' = 180,
-    'lp_pri_200' = 200
-}
+export declare const ISize: {
+    readonly 'lp-pri-size-minus6': -6;
+    readonly 'lp-pri-size-minus4': -4;
+    readonly 'lp-pri-size-minus2': -2;
+    readonly 'lp-pri-size-0': 0;
+    readonly 'lp-pri-size-1': 1;
+    readonly 'lp-pri-size-2': 2;
+    readonly 'lp-pri-size-3': 3;
+    readonly 'lp-pri-size-4': 4;
+    readonly 'lp-pri-size-6': 6;
+    readonly 'lp-pri-size-8': 8;
+    readonly 'lp-pri-size-10': 10;
+    readonly 'lp-pri-size-12': 12;
+    readonly 'lp-pri-size-14': 14;
+    readonly 'lp-pri-size-16': 16;
+    readonly 'lp-pri-size-18': 18;
+    readonly 'lp-pri-size-20': 20;
+    readonly 'lp-pri-size-24': 24;
+    readonly 'lp-pri-size-32': 32;
+    readonly 'lp-pri-size-40': 40;
+    readonly 'lp-pri-size-48': 48;
+    readonly 'lp-pri-size-56': 56;
+    readonly 'lp-pri-size-64': 64;
+    readonly 'lp-pri-size-80': 80;
+    readonly 'lp-pri-size-100': 100;
+    readonly 'lp-pri-size-120': 120;
+    readonly 'lp-pri-size-140': 140;
+    readonly 'lp-pri-size-160': 160;
+    readonly 'lp-pri-size-180': 180;
+    readonly 'lp-pri-size-200': 200;
+};

package/lib/design/typography/index.d.ts

@@ -1,2 +1 @@
 export * from './primitive';
-export * from './usage';

package/lib/design/vars.d.ts

@@ -41,6 +41,7 @@ export declare const vars: {
         "inverse-container-high-hover": string;
         "inverse-container-static-high": string;
         "inverse-container-static-high-hover": string;
+        "inverse-container-highest": string;
         "inverse-fill-mid": string;
         "inverse-fill-mid-hover": string;
         "inverse-label-primary": string;

package/lib/index.cjs

@@ -32,11 +32,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   DesignSystemHead: () => DesignSystemHead,
-  Display1: () => Display1,
-  Heading1: () => Heading1,
-  Heading2: () => Heading2,
   font: () => font,
+  gap: () => gap,
   opacity: () => opacity,
+  padding: () => padding,
   radius: () => radius,
   size: () => size,
   useDarkTheme: () => useDarkTheme,
@@ -45,61 +44,104 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/design/size/type.ts
+var ISize = {
+  "lp-pri-size-minus6": -6,
+  "lp-pri-size-minus4": -4,
+  "lp-pri-size-minus2": -2,
+  "lp-pri-size-0": 0,
+  "lp-pri-size-1": 1,
+  "lp-pri-size-2": 2,
+  "lp-pri-size-3": 3,
+  "lp-pri-size-4": 4,
+  "lp-pri-size-6": 6,
+  "lp-pri-size-8": 8,
+  "lp-pri-size-10": 10,
+  "lp-pri-size-12": 12,
+  "lp-pri-size-14": 14,
+  "lp-pri-size-16": 16,
+  "lp-pri-size-18": 18,
+  "lp-pri-size-20": 20,
+  "lp-pri-size-24": 24,
+  "lp-pri-size-32": 32,
+  "lp-pri-size-40": 40,
+  "lp-pri-size-48": 48,
+  "lp-pri-size-56": 56,
+  "lp-pri-size-64": 64,
+  "lp-pri-size-80": 80,
+  "lp-pri-size-100": 100,
+  "lp-pri-size-120": 120,
+  "lp-pri-size-140": 140,
+  "lp-pri-size-160": 160,
+  "lp-pri-size-180": 180,
+  "lp-pri-size-200": 200
+};
+
 // src/design/radius/index.ts
 var radius = {
-  "lp-sys-xxs": 2 /* lp_pri_2 */,
-  "lp-sys-xs": 4 /* lp_pri_4 */,
-  "lp-sys-s": 6 /* lp_pri_6 */,
-  "lp-sys-m": 8 /* lp_pri_8 */,
-  "lp-sys-l": 10 /* lp_pri_10 */,
-  "lp-sys-xl": 12 /* lp_pri_12 */,
-  "lp-sys-xxl": 200 /* lp_pri_200 */
+  "lp-sys-radius-xxs": ISize["lp-pri-size-2"],
+  "lp-sys-radius-xs": ISize["lp-pri-size-4"],
+  "lp-sys-radius-s": ISize["lp-pri-size-6"],
+  "lp-sys-radius-m": ISize["lp-pri-size-8"],
+  "lp-sys-radius-l": ISize["lp-pri-size-10"],
+  "lp-sys-radius-xl": ISize["lp-pri-size-12"],
+  "lp-sys-radius-xxl": ISize["lp-pri-size-200"]
 };
 
 // src/design/opacity/index.ts
 var opacity = {
-  "lp-pri-90": "90%",
-  "lp-pri-80": "80%",
-  "lp-pri-70": "70%",
-  "lp-pri-60": "60%",
-  "lp-pri-50": "50%",
-  "lp-pri-40": "40%",
-  "lp-pri-30": "30%",
-  "lp-pri-20": "20%",
-  "lp-pri-12": "12%",
-  "lp-pri-8": "8%",
-  "lp-pri-5": "5%",
-  "lp-pri-0": "0%"
+  "lp-pri-color-opacity-80": "80%",
+  "lp-pri-color-opacity-72": "72%",
+  "lp-pri-color-opacity-64": "64%",
+  "lp-pri-color-opacity-56": "56%",
+  "lp-pri-color-opacity-50": "50%",
+  "lp-pri-color-opacity-48": "48%",
+  "lp-pri-color-opacity-44": "44%",
+  "lp-pri-color-opacity-40": "40%",
+  "lp-pri-color-opacity-36": "36%",
+  "lp-pri-color-opacity-32": "32%",
+  "lp-pri-color-opacity-28": "28%",
+  "lp-pri-color-opacity-24": "24%",
+  "lp-pri-color-opacity-20": "20%",
+  "lp-pri-color-opacity-16": "16%",
+  "lp-pri-color-opacity-12": "12%",
+  "lp-pri-color-opacity-8": "8%",
+  "lp-pri-color-opacity-4": "4%",
+  "lp-pri-color-opacity-1": "1%",
+  "lp-pri-color-opacity-0": "0%"
 };
 
 // src/design/size/index.ts
 var size = {
-  lp_pri_0: 0 /* lp_pri_0 */,
-  lp_pri_1: 1 /* lp_pri_1 */,
-  lp_pri_2: 2 /* lp_pri_2 */,
-  lp_pri_3: 3 /* lp_pri_3 */,
-  lp_pri_4: 4 /* lp_pri_4 */,
-  lp_pri_6: 6 /* lp_pri_6 */,
-  lp_pri_8: 8 /* lp_pri_8 */,
-  lp_pri_10: 10 /* lp_pri_10 */,
-  lp_pri_12: 12 /* lp_pri_12 */,
-  lp_pri_14: 14 /* lp_pri_14 */,
-  lp_pri_16: 16 /* lp_pri_16 */,
-  lp_pri_18: 18 /* lp_pri_18 */,
-  lp_pri_20: 20 /* lp_pri_20 */,
-  lp_pri_24: 24 /* lp_pri_24 */,
-  lp_pri_32: 32 /* lp_pri_32 */,
-  lp_pri_40: 40 /* lp_pri_40 */,
-  lp_pri_48: 48 /* lp_pri_48 */,
-  lp_pri_56: 56 /* lp_pri_56 */,
-  lp_pri_64: 64 /* lp_pri_64 */,
-  lp_pri_80: 80 /* lp_pri_80 */,
-  lp_pri_100: 100 /* lp_pri_100 */,
-  lp_pri_120: 120 /* lp_pri_120 */,
-  lp_pri_140: 140 /* lp_pri_140 */,
-  lp_pri_160: 160 /* lp_pri_160 */,
-  lp_pri_180: 180 /* lp_pri_180 */,
-  lp_pri_200: 200 /* lp_pri_200 */
+  ["lp-pri-size-minus6"]: ISize["lp-pri-size-minus6"],
+  ["lp-pri-size-minus4"]: ISize["lp-pri-size-minus4"],
+  ["lp-pri-size-minus2"]: ISize["lp-pri-size-minus2"],
+  ["lp-pri-size-0"]: ISize["lp-pri-size-0"],
+  ["lp-pri-size-1"]: ISize["lp-pri-size-1"],
+  ["lp-pri-size-2"]: ISize["lp-pri-size-2"],
+  ["lp-pri-size-3"]: ISize["lp-pri-size-3"],
+  ["lp-pri-size-4"]: ISize["lp-pri-size-4"],
+  ["lp-pri-size-6"]: ISize["lp-pri-size-6"],
+  ["lp-pri-size-8"]: ISize["lp-pri-size-8"],
+  ["lp-pri-size-10"]: ISize["lp-pri-size-10"],
+  ["lp-pri-size-12"]: ISize["lp-pri-size-12"],
+  ["lp-pri-size-14"]: ISize["lp-pri-size-14"],
+  ["lp-pri-size-16"]: ISize["lp-pri-size-16"],
+  ["lp-pri-size-18"]: ISize["lp-pri-size-18"],
+  ["lp-pri-size-20"]: ISize["lp-pri-size-20"],
+  ["lp-pri-size-24"]: ISize["lp-pri-size-24"],
+  ["lp-pri-size-32"]: ISize["lp-pri-size-32"],
+  ["lp-pri-size-40"]: ISize["lp-pri-size-40"],
+  ["lp-pri-size-48"]: ISize["lp-pri-size-48"],
+  ["lp-pri-size-56"]: ISize["lp-pri-size-56"],
+  ["lp-pri-size-64"]: ISize["lp-pri-size-64"],
+  ["lp-pri-size-80"]: ISize["lp-pri-size-80"],
+  ["lp-pri-size-100"]: ISize["lp-pri-size-100"],
+  ["lp-pri-size-120"]: ISize["lp-pri-size-120"],
+  ["lp-pri-size-140"]: ISize["lp-pri-size-140"],
+  ["lp-pri-size-160"]: ISize["lp-pri-size-160"],
+  ["lp-pri-size-180"]: ISize["lp-pri-size-180"],
+  ["lp-pri-size-200"]: ISize["lp-pri-size-200"]
 };
 
 // src/design/typography/primitive.ts
@@ -140,33 +182,51 @@ var weight = {
 };
 var font = { weight, lineHeight, size: size2 };
 
-// src/design/typography/usage/Heading.tsx
-var import_react = __toESM(require("react"));
-var Heading1 = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { ...props, className: `lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ""}` }, props.children);
-}, "Heading1");
-var Heading2 = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { ...props, className: `lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ""}` }, props.children);
-}, "Heading2");
+// src/design/padding/index.ts
+var padding = {
+  "lp-sys-padding-component-100": ISize["lp-pri-size-4"],
+  "lp-sys-padding-component-200": ISize["lp-pri-size-8"],
+  "lp-sys-padding-component-300": ISize["lp-pri-size-12"],
+  "lp-sys-padding-component-400": ISize["lp-pri-size-16"],
+  "lp-sys-padding-component-500": ISize["lp-pri-size-20"],
+  "lp-sys-padding-component-600": ISize["lp-pri-size-24"],
+  "lp-sys-padding-component-700": ISize["lp-pri-size-32"],
+  "lp-sys-padding-component-800": ISize["lp-pri-size-40"],
+  "lp-sys-padding-component-900": ISize["lp-pri-size-48"],
+  "lp-sys-padding-section-100": ISize["lp-pri-size-24"],
+  "lp-sys-padding-section-200": ISize["lp-pri-size-32"],
+  "lp-sys-padding-section-300": ISize["lp-pri-size-40"],
+  "lp-sys-padding-section-400": ISize["lp-pri-size-48"],
+  "lp-sys-padding-section-500": ISize["lp-pri-size-56"],
+  "lp-sys-padding-section-600": ISize["lp-pri-size-64"],
+  "lp-sys-padding-section-700": ISize["lp-pri-size-80"],
+  "lp-sys-padding-section-800": ISize["lp-pri-size-100"],
+  "lp-sys-padding-section-900": ISize["lp-pri-size-120"]
+};
 
-// src/design/typography/usage/Display.tsx
-var import_react2 = __toESM(require("react"));
-var Display1 = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ import_react2.default.createElement(
-    "div",
-    {
-      ...props,
-      className: `lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ""}`
-    },
-    props.children
-  );
-}, "Display1");
+// src/design/gap/index.ts
+var gap = {
+  "lp-sys-gap-positive-50": ISize["lp-pri-size-2"],
+  "lp-sys-gap-positive-100": ISize["lp-pri-size-4"],
+  "lp-sys-gap-positive-150": ISize["lp-pri-size-6"],
+  "lp-sys-gap-positive-200": ISize["lp-pri-size-8"],
+  "lp-sys-gap-positive-300": ISize["lp-pri-size-12"],
+  "lp-sys-gap-positive-400": ISize["lp-pri-size-16"],
+  "lp-sys-gap-positive-500": ISize["lp-pri-size-20"],
+  "lp-sys-gap-positive-600": ISize["lp-pri-size-24"],
+  "lp-sys-gap-positive-700": ISize["lp-pri-size-32"],
+  "lp-sys-gap-positive-800": ISize["lp-pri-size-40"],
+  "lp-sys-gap-positive-900": ISize["lp-pri-size-48"],
+  "lp-sys-gap-negative-700": ISize["lp-pri-size-minus2"],
+  "lp-sys-gap-negative-800": ISize["lp-pri-size-minus4"],
+  "lp-sys-gap-negative-900": ISize["lp-pri-size-minus6"]
+};
 
 // src/hooks/useDarkTheme.ts
-var import_react3 = require("react");
+var import_react = require("react");
 var useDarkTheme = /* @__PURE__ */ __name(() => {
-  const [isDarkMode, setIsDarkMode] = (0, import_react3.useState)(false);
-  (0, import_react3.useLayoutEffect)(() => {
+  const [isDarkMode, setIsDarkMode] = (0, import_react.useState)(false);
+  (0, import_react.useLayoutEffect)(() => {
     setIsDarkMode(document.documentElement.getAttribute("color-theme") === "dark");
   }, []);
   return {
@@ -181,9 +241,9 @@ var useLanguage = /* @__PURE__ */ __name(() => {
 }, "useLanguage");
 
 // src/components/Head.tsx
-var import_react4 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var DesignSystemHead = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ import_react4.default.createElement(Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement(Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
     "link",
     {
       rel: "stylesheet",
@@ -191,7 +251,7 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
       crossOrigin: "anonymous",
       href: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css"
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react2.default.createElement(
     "link",
     {
       rel: "stylesheet",
@@ -199,7 +259,7 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
       crossOrigin: "anonymous",
       href: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), /* @__PURE__ */ import_react4.default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react2.default.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), /* @__PURE__ */ import_react2.default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), /* @__PURE__ */ import_react2.default.createElement(
     "link",
     {
       href: "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
@@ -209,6 +269,6 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
 }, "DesignSystemHead");
 
 // src/design/vars.ts
-var vars = { "color": { "neutral-container-lowest": "var(--neutral-container-lowest)", "neutral-container-lowest-hover": "var(--neutral-container-lowest-hover)", "neutral-container-low": "var(--neutral-container-low)", "neutral-container-low-hover": "var(--neutral-container-low-hover)", "neutral-container-mid": "var(--neutral-container-mid)", "neutral-container-mid-hover": "var(--neutral-container-mid-hover)", "neutral-container-high": "var(--neutral-container-high)", "neutral-container-high-hover": "var(--neutral-container-high-hover)", "neutral-container-highest": "var(--neutral-container-highest)", "neutral-container-static-lowest": "var(--neutral-container-static-lowest)", "neutral-container-static-lowest-hover": "var(--neutral-container-static-lowest-hover)", "neutral-fill-lowest": "var(--neutral-fill-lowest)", "neutral-fill-lowest-hover": "var(--neutral-fill-lowest-hover)", "neutral-fill-low": "var(--neutral-fill-low)", "neutral-fill-low-hover": "var(--neutral-fill-low-hover)", "neutral-fill-mid": "var(--neutral-fill-mid)", "neutral-fill-mid-hover": "var(--neutral-fill-mid-hover)", "neutral-fill-high": "var(--neutral-fill-high)", "neutral-fill-high-hover": "var(--neutral-fill-high-hover)", "neutral-label-primary": "var(--neutral-label-primary)", "neutral-label-secondary": "var(--neutral-label-secondary)", "neutral-label-tertiary": "var(--neutral-label-tertiary)", "neutral-label-quaternary": "var(--neutral-label-quaternary)", "neutral-label-static-primary": "var(--neutral-label-static-primary)", "neutral-label-static-secondary": "var(--neutral-label-static-secondary)", "neutral-border-overlay-strong": "var(--neutral-border-overlay-strong)", "neutral-border-overlay-normal": "var(--neutral-border-overlay-normal)", "neutral-border-overlay-subtle": "var(--neutral-border-overlay-subtle)", "neutral-border-opaque-strong": "var(--neutral-border-opaque-strong)", "neutral-border-opaque-normal": "var(--neutral-border-opaque-normal)", "neutral-border-opaque-subtle": "var(--neutral-border-opaque-subtle)", "inverse-container-lowest": "var(--inverse-container-lowest)", "inverse-container-lowest-hover": "var(--inverse-container-lowest-hover)", "inverse-container-low": "var(--inverse-container-low)", "inverse-container-low-hover": "var(--inverse-container-low-hover)", "inverse-container-mid": "var(--inverse-container-mid)", "inverse-container-mid-hover": "var(--inverse-container-mid-hover)", "inverse-container-high": "var(--inverse-container-high)", "inverse-container-high-hover": "var(--inverse-container-high-hover)", "inverse-container-static-high": "var(--inverse-container-static-high)", "inverse-container-static-high-hover": "var(--inverse-container-static-high-hover)", "inverse-fill-mid": "var(--inverse-fill-mid)", "inverse-fill-mid-hover": "var(--inverse-fill-mid-hover)", "inverse-label-primary": "var(--inverse-label-primary)", "inverse-label-secondary": "var(--inverse-label-secondary)", "inverse-label-tertiary": "var(--inverse-label-tertiary)", "inverse-label-quaternary": "var(--inverse-label-quaternary)", "inverse-label-static-primary": "var(--inverse-label-static-primary)", "inverse-label-static-secondary": "var(--inverse-label-static-secondary)", "inverse-border-overlay-strong": "var(--inverse-border-overlay-strong)", "inverse-border-overlay-normal": "var(--inverse-border-overlay-normal)", "inverse-border-overlay-subtle": "var(--inverse-border-overlay-subtle)", "inverse-border-opaque-strong": "var(--inverse-border-opaque-strong)", "inverse-border-opaque-normal": "var(--inverse-border-opaque-normal)", "inverse-border-opaque-subtle": "var(--inverse-border-opaque-subtle)", "brand-container-mid": "var(--brand-container-mid)", "brand-container-mid-hover": "var(--brand-container-mid-hover)", "brand-container-high": "var(--brand-container-high)", "brand-label-primary": "var(--brand-label-primary)", "brand-label-secondary": "var(--brand-label-secondary)", "brand-border-opaque-normal": "var(--brand-border-opaque-normal)", "brand-border-overlay-normal": "var(--brand-border-overlay-normal)", "accent-container-yellow": "var(--accent-container-yellow)", "accent-mint": "var(--accent-mint)", "accent-cyan": "var(--accent-cyan)", "accent-purple": "var(--accent-purple)", "accent-pink": "var(--accent-pink)", "function-container-positive": "var(--function-container-positive)", "function-container-negative": "var(--function-container-negative)", "function-container-negative-hover": "var(--function-container-negative-hover)", "function-container-caution": "var(--function-container-caution)", "function-label-positive": "var(--function-label-positive)", "function-label-negative": "var(--function-label-negative)", "function-label-caution": "var(--function-label-caution)" } };
+var vars = { "color": { "neutral-container-lowest": "var(--neutral-container-lowest)", "neutral-container-lowest-hover": "var(--neutral-container-lowest-hover)", "neutral-container-low": "var(--neutral-container-low)", "neutral-container-low-hover": "var(--neutral-container-low-hover)", "neutral-container-mid": "var(--neutral-container-mid)", "neutral-container-mid-hover": "var(--neutral-container-mid-hover)", "neutral-container-high": "var(--neutral-container-high)", "neutral-container-high-hover": "var(--neutral-container-high-hover)", "neutral-container-highest": "var(--neutral-container-highest)", "neutral-container-static-lowest": "var(--neutral-container-static-lowest)", "neutral-container-static-lowest-hover": "var(--neutral-container-static-lowest-hover)", "neutral-fill-lowest": "var(--neutral-fill-lowest)", "neutral-fill-lowest-hover": "var(--neutral-fill-lowest-hover)", "neutral-fill-low": "var(--neutral-fill-low)", "neutral-fill-low-hover": "var(--neutral-fill-low-hover)", "neutral-fill-mid": "var(--neutral-fill-mid)", "neutral-fill-mid-hover": "var(--neutral-fill-mid-hover)", "neutral-fill-high": "var(--neutral-fill-high)", "neutral-fill-high-hover": "var(--neutral-fill-high-hover)", "neutral-label-primary": "var(--neutral-label-primary)", "neutral-label-secondary": "var(--neutral-label-secondary)", "neutral-label-tertiary": "var(--neutral-label-tertiary)", "neutral-label-quaternary": "var(--neutral-label-quaternary)", "neutral-label-static-primary": "var(--neutral-label-static-primary)", "neutral-label-static-secondary": "var(--neutral-label-static-secondary)", "neutral-border-overlay-strong": "var(--neutral-border-overlay-strong)", "neutral-border-overlay-normal": "var(--neutral-border-overlay-normal)", "neutral-border-overlay-subtle": "var(--neutral-border-overlay-subtle)", "neutral-border-opaque-strong": "var(--neutral-border-opaque-strong)", "neutral-border-opaque-normal": "var(--neutral-border-opaque-normal)", "neutral-border-opaque-subtle": "var(--neutral-border-opaque-subtle)", "inverse-container-lowest": "var(--inverse-container-lowest)", "inverse-container-lowest-hover": "var(--inverse-container-lowest-hover)", "inverse-container-low": "var(--inverse-container-low)", "inverse-container-low-hover": "var(--inverse-container-low-hover)", "inverse-container-mid": "var(--inverse-container-mid)", "inverse-container-mid-hover": "var(--inverse-container-mid-hover)", "inverse-container-high": "var(--inverse-container-high)", "inverse-container-high-hover": "var(--inverse-container-high-hover)", "inverse-container-static-high": "var(--inverse-container-static-high)", "inverse-container-static-high-hover": "var(--inverse-container-static-high-hover)", "inverse-container-highest": "var(--inverse-container-highest)", "inverse-fill-mid": "var(--inverse-fill-mid)", "inverse-fill-mid-hover": "var(--inverse-fill-mid-hover)", "inverse-label-primary": "var(--inverse-label-primary)", "inverse-label-secondary": "var(--inverse-label-secondary)", "inverse-label-tertiary": "var(--inverse-label-tertiary)", "inverse-label-quaternary": "var(--inverse-label-quaternary)", "inverse-label-static-primary": "var(--inverse-label-static-primary)", "inverse-label-static-secondary": "var(--inverse-label-static-secondary)", "inverse-border-overlay-strong": "var(--inverse-border-overlay-strong)", "inverse-border-overlay-normal": "var(--inverse-border-overlay-normal)", "inverse-border-overlay-subtle": "var(--inverse-border-overlay-subtle)", "inverse-border-opaque-strong": "var(--inverse-border-opaque-strong)", "inverse-border-opaque-normal": "var(--inverse-border-opaque-normal)", "inverse-border-opaque-subtle": "var(--inverse-border-opaque-subtle)", "brand-container-mid": "var(--brand-container-mid)", "brand-container-mid-hover": "var(--brand-container-mid-hover)", "brand-container-high": "var(--brand-container-high)", "brand-label-primary": "var(--brand-label-primary)", "brand-label-secondary": "var(--brand-label-secondary)", "brand-border-opaque-normal": "var(--brand-border-opaque-normal)", "brand-border-overlay-normal": "var(--brand-border-overlay-normal)", "accent-container-yellow": "var(--accent-container-yellow)", "accent-mint": "var(--accent-mint)", "accent-cyan": "var(--accent-cyan)", "accent-purple": "var(--accent-purple)", "accent-pink": "var(--accent-pink)", "function-container-positive": "var(--function-container-positive)", "function-container-negative": "var(--function-container-negative)", "function-container-negative-hover": "var(--function-container-negative-hover)", "function-container-caution": "var(--function-container-caution)", "function-label-positive": "var(--function-label-positive)", "function-label-negative": "var(--function-label-negative)", "function-label-caution": "var(--function-label-caution)" } };
 /*! For license information please see index.cjs.LEGAL.txt */
 //# sourceMappingURL=index.cjs.map