@bbodek/internal-ui 0.0.13 → 0.0.15

package/dist/variants/color/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './variant';
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/color/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/variants/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/variants/color/types/index.d.ts

@@ -0,0 +1,4 @@
+import { COLOR_TYPES, COLOR_VARIANTS } from '../../../variants/color/variant';
+export type ColorVariants = (typeof COLOR_VARIANTS)[keyof typeof COLOR_VARIANTS];
+export type ColorTypes = (typeof COLOR_TYPES)[keyof typeof COLOR_TYPES];
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/color/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/variants/color/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,aAAa,GACvB,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC"}

package/dist/variants/color/variant.d.ts

@@ -0,0 +1,62 @@
+import { ColorTypes, ColorVariants } from '../../variants/color/types';
+export declare const COLOR_VARIANTS: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+    readonly PRIMARY_01: "primary-01";
+    readonly PRIMARY_02: "primary-02";
+    readonly PRIMARY_03: "primary-03";
+    readonly PRIMARY_04: "primary-04";
+    readonly PRIMARY_05: "primary-05";
+    readonly PRIMARY_06: "primary-06";
+    readonly PRIMARY_07: "primary-07";
+    readonly PRIMARY_08: "primary-08";
+    readonly PRIMARY_09: "primary-09";
+    readonly PRIMARY_10: "primary-10";
+    readonly PRIMARY_11: "primary-11";
+    readonly GRAY_01: "gray-01";
+    readonly GRAY_02: "gray-02";
+    readonly GRAY_03: "gray-03";
+    readonly GRAY_04: "gray-04";
+    readonly GRAY_05: "gray-05";
+    readonly GRAY_06: "gray-06";
+    readonly GRAY_07: "gray-07";
+    readonly GRAY_08: "gray-08";
+    readonly GRAY_09: "gray-09";
+    readonly RED_01: "red-01";
+    readonly RED_02: "red-02";
+    readonly RED_03: "red-03";
+    readonly RED_04: "red-04";
+    readonly RED_05: "red-05";
+    readonly RED_06: "red-06";
+    readonly RED_07: "red-07";
+    readonly RED_08: "red-08";
+    readonly RED_09: "red-09";
+    readonly YELLOW_01: "yellow-01";
+    readonly YELLOW_02: "yellow-02";
+    readonly YELLOW_03: "yellow-03";
+    readonly YELLOW_04: "yellow-04";
+    readonly YELLOW_05: "yellow-05";
+    readonly YELLOW_06: "yellow-06";
+    readonly YELLOW_07: "yellow-07";
+    readonly YELLOW_08: "yellow-08";
+    readonly YELLOW_09: "yellow-09";
+    readonly GREEN_01: "green-01";
+    readonly GREEN_02: "green-02";
+    readonly GREEN_03: "green-03";
+    readonly GREEN_04: "green-04";
+    readonly GREEN_05: "green-05";
+    readonly GREEN_06: "green-06";
+    readonly GREEN_07: "green-07";
+    readonly GREEN_08: "green-08";
+    readonly GREEN_09: "green-09";
+};
+export declare const COLOR_TYPES: {
+    readonly TEXT: "TEXT";
+    readonly BACKGROUND: "BACKGROUND";
+    readonly BORDER: "BORDER";
+    readonly FILL: "FILL";
+    readonly PLACEHOLDER: "PLACEHOLDER";
+};
+export declare const COLOR_TYPE_PREFIXES: Record<ColorTypes, string>;
+export declare const COLOR_STYLES_MAPPER: Record<ColorTypes, Record<ColorVariants, string>>;
+//# sourceMappingURL=variant.d.ts.map

package/dist/variants/color/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../src/variants/color/variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEnE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMjD,CAAC;AAEX,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,UAAU,EACV,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAiQrB,CAAC"}

package/dist/variants/index.d.ts

@@ -0,0 +1,5 @@
+export * from './color';
+export * from './radius';
+export * from './shadow';
+export * from './typography';
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/variants/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}

package/dist/variants/radius/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './variant';
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/radius/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/variants/radius/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/variants/radius/types/index.d.ts

@@ -0,0 +1,3 @@
+import { RADIUS_VARIANTS } from '../../../variants/radius/variant';
+export type RadiusVariants = (typeof RADIUS_VARIANTS)[keyof typeof RADIUS_VARIANTS];
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/radius/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/variants/radius/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC"}

package/dist/variants/radius/variant.d.ts

@@ -0,0 +1,19 @@
+export declare const RADIUS_VARIANTS: {
+    readonly RADIUS_4: "radius-4";
+    readonly RADIUS_6: "radius-6";
+    readonly RADIUS_8: "radius-8";
+    readonly RADIUS_12: "radius-12";
+    readonly RADIUS_16: "radius-16";
+    readonly RADIUS_24: "radius-24";
+    readonly RADIUS_FULL: "radius-full";
+};
+export declare const RADIUS_STYLES_MAPPER: {
+    readonly "radius-4": "rounded-4";
+    readonly "radius-6": "rounded-6";
+    readonly "radius-8": "rounded-8";
+    readonly "radius-12": "rounded-12";
+    readonly "radius-16": "rounded-16";
+    readonly "radius-24": "rounded-24";
+    readonly "radius-full": "rounded-full";
+};
+//# sourceMappingURL=variant.d.ts.map

package/dist/variants/radius/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../src/variants/radius/variant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;CAQlB,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;;;;CAQvB,CAAC"}

package/dist/variants/shadow/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './variant';
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/shadow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/variants/shadow/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/variants/shadow/types/index.d.ts

@@ -0,0 +1,3 @@
+import { SHADOW_VARIANTS } from '../../../variants/shadow/variant';
+export type ShadowVariants = (typeof SHADOW_VARIANTS)[keyof typeof SHADOW_VARIANTS];
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/shadow/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/variants/shadow/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC"}

package/dist/variants/shadow/variant.d.ts

@@ -0,0 +1,9 @@
+export declare const SHADOW_VARIANTS: {
+    readonly SHADOW_4: "shadow-4";
+    readonly SHADOW_8: "shadow-8";
+    readonly SHADOW_12: "shadow-12";
+    readonly SHADOW_20: "shadow-20";
+    readonly SHADOW_24: "shadow-24";
+    readonly SHADOW_30: "shadow-30";
+};
+//# sourceMappingURL=variant.d.ts.map

package/dist/variants/shadow/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../src/variants/shadow/variant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC"}

package/dist/variants/typography/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './variant';
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/variants/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/variants/typography/types/index.d.ts

@@ -0,0 +1,3 @@
+import { TYPOGRAPHY_VARIANTS } from '../../../variants/typography/variant';
+export type TypographyVariants = (typeof TYPOGRAPHY_VARIANTS)[keyof typeof TYPOGRAPHY_VARIANTS];
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/typography/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/variants/typography/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/variants/typography/variant.d.ts

@@ -0,0 +1,25 @@
+import { TypographyVariants } from '../../variants/typography/types';
+export declare const TYPOGRAPHY_VARIANTS: {
+    readonly DISPLAY_34_B: "display-34-b";
+    readonly DISPLAY_34_M: "display-34-m";
+    readonly DISPLAY_30_B: "display-30-b";
+    readonly DISPLAY_30_M: "display-30-m";
+    readonly HEADLINE_24_B: "headline-24-b";
+    readonly HEADLINE_24_M: "headline-24-m";
+    readonly HEADLINE_20_B: "headline-20-b";
+    readonly HEADLINE_20_M: "headline-20-m";
+    readonly BODY_18_B: "body-18-b";
+    readonly BODY_18_M: "body-18-m";
+    readonly BODY_18_R: "body-18-r";
+    readonly BODY_16_B: "body-16-b";
+    readonly BODY_16_M: "body-16-m";
+    readonly BODY_16_R: "body-16-r";
+    readonly BODY_14_B: "body-14-b";
+    readonly BODY_14_M: "body-14-m";
+    readonly BODY_14_R: "body-14-r";
+    readonly BODY_12_B: "body-12-b";
+    readonly BODY_12_M: "body-12-m";
+};
+export declare const TYPOGRAPHY_PREFIX = "text-";
+export declare const TYPOGRAPHY_STYLES_MAPPER: Record<TypographyVariants, string>;
+//# sourceMappingURL=variant.d.ts.map

package/dist/variants/typography/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../src/variants/typography/variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;CAoBtB,CAAC;AAEX,eAAO,MAAM,iBAAiB,UAAU,CAAC;AAEzC,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAoBvE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbodek/internal-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -13,39 +13,46 @@
       "import": "./dist/index.es.js",
       "types": "./dist/index.d.ts"
     },
-    "./globals.css": "./src/styles/globals.css",
-    "./tailwind.config.js": "./tailwind.config.js"
+    "./styles": "./src/styles/globals.css",
+    "./tailwind-config": "./tailwind.config.js"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "rollup -c --watch & tsc -p tsconfig.build.json --watch & tsc-alias -p tsconfig.build.json --watch",
     "build": "rollup -c && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.8",
+    "@bbodek/utils": "workspace:*",
+    "@bbodek/hooks": "workspace:*",
+    "@phosphor-icons/core": "^2.1.1",
+    "@phosphor-icons/web": "^2.1.2",
+    "clsx": "^2.1.1",
     "next": "^15.3.1",
+    "pretendard": "^1.3.9",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "peerDependencies": {
     "next": "^15.3.1",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4"
   },
   "devDependencies": {
     "@dotoli/eslint-config": "workspace:*",
     "@dotoli/typescript-config": "workspace:*",
-    "@eslint/eslintrc": "^3",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "15.3.1",
+    "eslint": "^9.26.0",
     "rollup": "^4.40.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "tsc-alias": "^1.8.16",
     "tslib": "^2.8.1",

package/src/styles/base.css

@@ -0,0 +1,51 @@
+@layer base {
+  html {
+    font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
+  }
+
+  input[type='number'] {
+    margin: 0;
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /**
+    * @description: use default placeholder color from v3
+    * @see: https://tailwindcss.com/docs/upgrade-guide#new-default-placeholder-color
+    * */
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-gray-400);
+  }
+
+  /**
+    * @description: use default button cursor from v3
+    * @see: https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor
+    * */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  details > summary {
+    list-style: none;
+  }
+
+  details > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  /**
+    * @description: use default margin value of dialog element from v3
+    * @see: https://tailwindcss.com/docs/upgrade-guide#dialog-margins-removed
+    * */
+  dialog {
+    margin: auto;
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,11 @@
+@import '@phosphor-icons/web/bold';
+@import '@phosphor-icons/web/duotone';
+@import '@phosphor-icons/web/fill';
+@import '@phosphor-icons/web/light';
+@import '@phosphor-icons/web/regular';
+@import '@phosphor-icons/web/thin';
+@import 'pretendard/dist/web/variable/pretendardvariable.css';
+@import './base.css';
+@import './theme.css';
+@import './safelist.css';
+@import './utilities.css';

package/src/styles/safelist.css

@@ -0,0 +1,4 @@
+@source inline("{hover:,focus:,active:,}{bg,text,fill,placeholder,border}-{gray,red,yellow,green}-{01,02,03,04,05,06,07,08,09,}");
+@source inline("{hover:,focus:,active:,}{bg,text,fill,placeholder,border}-primary-{01,02,03,04,05,06,07,08,09,10,11,}");
+@source inline("{hover:,focus:,active:,}{bg,fill}-{tooltip,dimmed}");
+@source inline("{hover:,focus:,active:,}{text-{display,headline,body,}-{34,30,24,20,18,16,14,12}-{b,m,r}}");

package/src/styles/theme.css

@@ -0,0 +1,189 @@
+@theme {
+  --color-black: #101828;
+  --color-white: #ffffff;
+  --color-primary-01: #f4f8ff;
+  --color-primary-02: #deebff;
+  --color-primary-03: #c2daff;
+  --color-primary-04: #9dc4ff;
+  --color-primary-05: #3b8aff;
+  --color-primary-06: #0579fb;
+  --color-primary-07: #1065e3;
+  --color-primary-08: #004dc0;
+  --color-primary-09: #003c96;
+  --color-primary-10: #002d6f;
+  --color-primary-11: #0c1321;
+  --color-gray-01: #f7f8f9;
+  --color-gray-02: #e7eaf2;
+  --color-gray-03: #d4dae6;
+  --color-gray-04: #bdc6d8;
+  --color-gray-05: #a9b2c7;
+  --color-gray-06: #6a7489;
+  --color-gray-07: #333d52;
+  --color-gray-08: #1f283c;
+  --color-gray-09: #131923;
+  --color-red-01: #ffedef;
+  --color-red-02: #ffe8e9;
+  --color-red-03: #ff9da4;
+  --color-red-04: #fc3f4c;
+  --color-red-05: #ea2432;
+  --color-red-06: #ca1825;
+  --color-red-07: #a3151f;
+  --color-red-08: #76080f;
+  --color-red-09: #330d0f;
+  --color-yellow-01: #fff7e3;
+  --color-yellow-02: #ffefca;
+  --color-yellow-03: #ffdc8a;
+  --color-yellow-04: #ffc134;
+  --color-yellow-05: #ffb712;
+  --color-yellow-06: #e79908;
+  --color-yellow-07: #905f03;
+  --color-yellow-08: #694707;
+  --color-yellow-09: #32250f;
+  --color-green-01: #ebfaf7;
+  --color-green-02: #dcf7f1;
+  --color-green-03: #8ee7d5;
+  --color-green-04: #15d0ab;
+  --color-green-05: #0fb997;
+  --color-green-06: #008c70;
+  --color-green-07: #0f6751;
+  --color-green-08: #045545;
+  --color-green-09: #10392b;
+  --color-tooltip: rgba(19, 25, 35, 0.8);
+  --color-dimmed: rgba(12, 19, 33, 0.4);
+
+  --text-display-34-b: 2.125rem;
+  --text-display-34-b--line-height: 1.36;
+  --text-display-34-b--font-weight: 700;
+  --text-display-34-b--letter-spacing: -0.01em;
+  --text-display-34-m: 2.125rem;
+  --text-display-34-m--line-height: 1.36;
+  --text-display-34-m--font-weight: 500;
+  --text-display-34-m--letter-spacing: -0.01em;
+
+  --text-display-30-b: 1.875rem;
+  --text-display-30-b--line-height: 1.36;
+  --text-display-30-b--font-weight: 700;
+  --text-display-30-b--letter-spacing: -0.01em;
+  --text-display-30-m: 1.875rem;
+  --text-display-30-m--line-height: 1.36;
+  --text-display-30-m--font-weight: 500;
+  --text-display-30-m--letter-spacing: -0.01em;
+
+  --text-headline-24-b: 1.5rem;
+  --text-headline-24-b--line-height: 1.4;
+  --text-headline-24-b--font-weight: 700;
+  --text-headline-24-b--letter-spacing: -0.01em;
+  --text-headline-24-m: 1.5rem;
+  --text-headline-24-m--line-height: 1.4;
+  --text-headline-24-m--font-weight: 500;
+  --text-headline-24-m--letter-spacing: -0.01em;
+
+  --text-headline-20-b: 1.25rem;
+  --text-headline-20-b--line-height: 1.4;
+  --text-headline-20-b--font-weight: 700;
+  --text-headline-20-b--letter-spacing: -0.01em;
+  --text-headline-20-m: 1.25rem;
+  --text-headline-20-m--line-height: 1.4;
+  --text-headline-20-m--font-weight: 500;
+  --text-headline-20-m--letter-spacing: -0.01em;
+
+  --text-body-18-b: 1.125rem;
+  --text-body-18-b--line-height: 1.5;
+  --text-body-18-b--font-weight: 700;
+  --text-body-18-b--letter-spacing: -0.01em;
+  --text-body-18-m: 1.125rem;
+  --text-body-18-m--line-height: 1.5;
+  --text-body-18-m--font-weight: 500;
+  --text-body-18-m--letter-spacing: -0.01em;
+  --text-body-18-r: 1.125rem;
+  --text-body-18-r--line-height: 1.5;
+  --text-body-18-r--font-weight: 400;
+  --text-body-18-r--letter-spacing: -0.01em;
+
+  --text-body-16-b: 1rem;
+  --text-body-16-b--line-height: 1.5;
+  --text-body-16-b--font-weight: 700;
+  --text-body-16-b--letter-spacing: -0.01em;
+  --text-body-16-m: 1rem;
+  --text-body-16-m--line-height: 1.5;
+  --text-body-16-m--font-weight: 500;
+  --text-body-16-m--letter-spacing: -0.01em;
+  --text-body-16-r: 1rem;
+  --text-body-16-r--line-height: 1.5;
+  --text-body-16-r--font-weight: 400;
+  --text-body-16-r--letter-spacing: -0.01em;
+
+  --text-body-14-b: 0.875rem;
+  --text-body-14-b--line-height: 1.5;
+  --text-body-14-b--font-weight: 700;
+  --text-body-14-b--letter-spacing: -0.01em;
+  --text-body-14-m: 0.875rem;
+  --text-body-14-m--line-height: 1.5;
+  --text-body-14-m--font-weight: 500;
+  --text-body-14-m--letter-spacing: -0.01em;
+  --text-body-14-r: 0.875rem;
+  --text-body-14-r--line-height: 1.5;
+  --text-body-14-r--font-weight: 400;
+  --text-body-14-r--letter-spacing: -0.01em;
+
+  --text-body-12-b: 0.75rem;
+  --text-body-12-b--line-height: 1.5;
+  --text-body-12-b--font-weight: 700;
+  --text-body-12-m: 0.75rem;
+  --text-body-12-m--line-height: 1.5;
+  --text-body-12-m--font-weight: 500;
+
+  --radius-4: 0.25rem;
+  --radius-6: 0.375rem;
+  --radius-8: 0.5rem;
+  --radius-12: 0.75rem;
+  --radius-16: 1rem;
+  --radius-20: 1.25rem;
+  --radius-24: 1.5rem;
+  --radius-full: calc(infinity * 1px);
+
+  --shadow-4: 0px 1px 4px 0px rgba(16, 24, 40, 0.12);
+  --shadow-8: 0px 3px 8px 0px rgba(16, 24, 40, 0.14);
+  --shadow-12: 0px 6px 12px 0px rgba(16, 24, 40, 0.16);
+  --shadow-20: 0px 8px 20px 0px rgba(16, 24, 40, 0.2);
+  --shadow-24: 0px 10px 24px 0px rgba(16, 24, 40, 0.3);
+  --shadow-30: 0px 12px 30px 0px rgba(16, 24, 40, 0.36);
+
+  --breakpoint-sm: 22.5rem;
+  --breakpoint-md: 51.25rem;
+  --breakpoint-lg: 73.75rem;
+  --container-sm: var(--breakpoint-sm);
+  --container-md: var(--breakpoint-md);
+  --container-lg: var(--breakpoint-lg);
+
+  --animate-fade-in: fade-in 0.2s cubic-bezier(0, 0, 0.5, 1);
+  --animate-popup: popup 0.2s cubic-bezier(0, 0, 0.5, 1);
+  --animate-bottom-sheet: bottom-sheet 0.2s cubic-bezier(0, 0, 0.5, 1);
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes popup {
+    0% {
+      transform: translateY(1rem);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes bottom-sheet {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+}

package/src/styles/utilities.css

@@ -0,0 +1,47 @@
+@utility flex-v-stack {
+  @apply flex flex-col;
+}
+
+@utility flex-h-stack {
+  @apply flex flex-row;
+}
+
+@utility flex-v-stack-center {
+  @apply flex-v-stack items-center justify-center;
+}
+
+@utility flex-h-stack-center {
+  @apply flex-h-stack items-center justify-center;
+}
+
+@utility safe-area-top {
+  padding-top: calc(constant(safe-area-inset-top));
+  padding-top: calc(env(afe-area-inset-top));
+}
+
+@utility safe-area-bottom {
+  padding-bottom: calc(constant(safe-area-inset-bottom));
+  padding-bottom: calc(env(safe-area-inset-bottom));
+}
+
+@utility safe-area-y {
+  @apply safe-area-top safe-area-bottom;
+}
+
+@utility safe-area-left {
+  padding-left: calc(constant(safe-area-inset-left) + 1rem);
+  padding-left: calc(env(safe-area-inset-left) + 1rem);
+}
+
+@utility safe-area-right {
+  padding-right: calc(constant(safe-area-inset-right) + 1rem);
+  padding-right: calc(env(safe-area-inset-right) + 1rem);
+}
+
+@utility safe-area-x {
+  @apply safe-area-right safe-area-left;
+}
+
+@utility safe-area {
+  @apply safe-area-top safe-area-right safe-area-bottom safe-area-left;
+}

package/dist/Button/Button.d.ts

@@ -1,4 +0,0 @@
-import { ButtonProps } from '../Button/types';
-declare const Button: ({ content, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;
-//# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,MAAM,GAAI,uBAAuB,WAAW,4CAEjD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Button/Button.es.js

@@ -1,2 +0,0 @@
-import{jsx as t}from"react/jsx-runtime";const e=({content:e,...n})=>t("button",{...n,children:e});export{e as default};
-//# sourceMappingURL=Button.es.js.map

package/dist/Button/Button.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Button/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,SAAS,CAAC"}

package/dist/Button/types/index.d.ts

@@ -1,5 +0,0 @@
-import { HTMLAttributes } from 'react';
-export interface ButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'content'> {
-    content: string;
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/Button/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB"}

package/dist/LinkButton/LinkButton.d.ts

@@ -1,5 +0,0 @@
-import { LinkProps } from 'next/link';
-import { PropsWithChildren } from 'react';
-declare const LinkButton: ({ children, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
-export default LinkButton;
-//# sourceMappingURL=LinkButton.d.ts.map

package/dist/LinkButton/LinkButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../src/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAa,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,QAAA,MAAM,UAAU,GAAI,wBAAwB,iBAAiB,CAAC,SAAS,CAAC,4CAEvE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/LinkButton/LinkButton.es.js

@@ -1,2 +0,0 @@
-import{jsx as r}from"react/jsx-runtime";import t from"next/link";const e=({children:e,...i})=>r(t,{...i,children:e});export{e as default};
-//# sourceMappingURL=LinkButton.es.js.map

package/dist/LinkButton/LinkButton.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinkButton.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/LinkButton/index.d.ts

@@ -1,2 +0,0 @@
-export { default as LinkButton } from './LinkButton';
-//# sourceMappingURL=index.d.ts.map

package/dist/LinkButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LinkButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -1,4 +0,0 @@
-import { ButtonProps } from '../../components/Button/types';
-declare const Button: ({ content, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;
-//# sourceMappingURL=Button.d.ts.map