@causw/core 0.0.9 → 0.0.11

package/dist/utils/converter/converter.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"converter.d.cts","names":[],"sources":["../../../src/utils/converter/converter.ts"],"mappings":";cAAa,cAAA,GAAkB,KAAA"}

package/dist/utils/converter/converter.d.mts

@@ -0,0 +1,5 @@
+//#region src/utils/converter/converter.d.ts
+declare const convertPxToRem: (value?: number) => string | undefined;
+//#endregion
+export { convertPxToRem };
+//# sourceMappingURL=converter.d.mts.map

package/dist/utils/converter/converter.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"converter.d.mts","names":[],"sources":["../../../src/utils/converter/converter.ts"],"mappings":";cAAa,cAAA,GAAkB,KAAA"}

package/dist/utils/converter/converter.mjs

@@ -0,0 +1,9 @@
+//#region src/utils/converter/converter.ts
+const convertPxToRem = (value) => {
+	if (value == null) return;
+	return `${value / 16}rem`;
+};
+
+//#endregion
+export { convertPxToRem };
+//# sourceMappingURL=converter.mjs.map

package/dist/utils/converter/converter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"converter.mjs","names":[],"sources":["../../../src/utils/converter/converter.ts"],"sourcesContent":["export const convertPxToRem = (value?: number) => {\n  if (value == null) return;\n  return `${value / 16}rem`;\n};\n"],"mappings":";AAAA,MAAa,kBAAkB,UAAmB;AAChD,KAAI,SAAS,KAAM;AACnB,QAAO,GAAG,QAAQ,GAAG"}

package/dist/utils/index.d.mts

@@ -0,0 +1,6 @@
+import { PolymorphicProps, PolymorphicPropsWithoutRef } from "./polymorphic/polymorphic.mjs";
+import "./polymorphic/index.mjs";
+import { mergeStyles } from "./mergeStyles/mergeStyles.mjs";
+import "./mergeStyles/index.mjs";
+import { convertPxToRem } from "./converter/converter.mjs";
+import { splitVariantProps } from "./splitter/splitter.mjs";

package/dist/utils/mergeStyles/index.d.mts

@@ -0,0 +1 @@
+import { mergeStyles } from "./mergeStyles.mjs";

package/dist/utils/mergeStyles/mergeStyles.cjs

@@ -0,0 +1,18 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+
+//#region src/utils/mergeStyles/mergeStyles.ts
+/**
+* Combines class names with Tailwind CSS conflict resolution
+*
+* @example
+* mergeStyles('px-2 py-1', 'px-4') // => 'py-1 px-4'
+* mergeStyles('text-red-500', condition && 'text-blue-500')
+*/
+function mergeStyles(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+
+//#endregion
+exports.mergeStyles = mergeStyles;

package/dist/utils/mergeStyles/mergeStyles.d.cts

@@ -0,0 +1,14 @@
+import { ClassValue } from "clsx";
+
+//#region src/utils/mergeStyles/mergeStyles.d.ts
+/**
+ * Combines class names with Tailwind CSS conflict resolution
+ *
+ * @example
+ * mergeStyles('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * mergeStyles('text-red-500', condition && 'text-blue-500')
+ */
+declare function mergeStyles(...inputs: ClassValue[]): string;
+//#endregion
+export { mergeStyles };
+//# sourceMappingURL=mergeStyles.d.cts.map

package/dist/utils/mergeStyles/mergeStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeStyles.d.cts","names":[],"sources":["../../../src/utils/mergeStyles/mergeStyles.ts"],"mappings":";;;;;AAUA;;;;;iBAAgB,WAAA,CAAA,GAAe,MAAA,EAAQ,UAAA"}

package/dist/utils/mergeStyles/mergeStyles.d.mts

@@ -0,0 +1,14 @@
+import { ClassValue } from "clsx";
+
+//#region src/utils/mergeStyles/mergeStyles.d.ts
+/**
+ * Combines class names with Tailwind CSS conflict resolution
+ *
+ * @example
+ * mergeStyles('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * mergeStyles('text-red-500', condition && 'text-blue-500')
+ */
+declare function mergeStyles(...inputs: ClassValue[]): string;
+//#endregion
+export { mergeStyles };
+//# sourceMappingURL=mergeStyles.d.mts.map

package/dist/utils/mergeStyles/mergeStyles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeStyles.d.mts","names":[],"sources":["../../../src/utils/mergeStyles/mergeStyles.ts"],"mappings":";;;;;AAUA;;;;;iBAAgB,WAAA,CAAA,GAAe,MAAA,EAAQ,UAAA"}

package/dist/utils/mergeStyles/mergeStyles.mjs

@@ -0,0 +1,18 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/utils/mergeStyles/mergeStyles.ts
+/**
+* Combines class names with Tailwind CSS conflict resolution
+*
+* @example
+* mergeStyles('px-2 py-1', 'px-4') // => 'py-1 px-4'
+* mergeStyles('text-red-500', condition && 'text-blue-500')
+*/
+function mergeStyles(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { mergeStyles };
+//# sourceMappingURL=mergeStyles.mjs.map

package/dist/utils/mergeStyles/mergeStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeStyles.mjs","names":[],"sources":["../../../src/utils/mergeStyles/mergeStyles.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Combines class names with Tailwind CSS conflict resolution\n *\n * @example\n * mergeStyles('px-2 py-1', 'px-4') // => 'py-1 px-4'\n * mergeStyles('text-red-500', condition && 'text-blue-500')\n */\nexport function mergeStyles(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,YAAY,GAAG,QAAsB;AACnD,QAAO,QAAQ,KAAK,OAAO,CAAC"}

package/dist/utils/polymorphic/index.d.mts

@@ -0,0 +1 @@
+import { PolymorphicProps, PolymorphicPropsWithoutRef } from "./polymorphic.mjs";

package/dist/utils/polymorphic/polymorphic.d.cts

@@ -0,0 +1,24 @@
+import React from "react";
+
+//#region src/utils/polymorphic/polymorphic.d.ts
+/**
+ * Polymorphic component props (includes ref)
+ *
+ * @example
+ * ```tsx
+ * type ButtonProps<E extends React.ElementType = 'button'> =
+ *   PolymorphicProps<E, { variant?: 'primary' | 'secondary' }>;
+ * ```
+ */
+type PolymorphicProps<E extends React.ElementType = 'div', Props = object> = Props & {
+  as?: E;
+} & Omit<React.ComponentProps<E>, keyof Props | 'as'>;
+/**
+ * Polymorphic component props without ref
+ */
+type PolymorphicPropsWithoutRef<E extends React.ElementType = 'div', Props = object> = Props & {
+  as?: E;
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof Props | 'as'>;
+//#endregion
+export { PolymorphicProps, PolymorphicPropsWithoutRef };
+//# sourceMappingURL=polymorphic.d.cts.map

package/dist/utils/polymorphic/polymorphic.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic.d.cts","names":[],"sources":["../../../src/utils/polymorphic/polymorphic.ts"],"mappings":";;;;;AAWA;;;;;;;KAAY,gBAAA,WACA,KAAA,CAAM,WAAA,4BAEd,KAAA;EAAU,EAAA,GAAK,CAAA;AAAA,IAAM,IAAA,CAAK,KAAA,CAAM,cAAA,CAAe,CAAA,SAAU,KAAA;;;;KAKjD,0BAAA,WACA,KAAA,CAAM,WAAA,4BAEd,KAAA;EAAU,EAAA,GAAK,CAAA;AAAA,IAAM,IAAA,CACrB,KAAA,CAAM,wBAAA,CAAyB,CAAA,SACzB,KAAA"}

package/dist/utils/polymorphic/polymorphic.d.mts

@@ -0,0 +1,24 @@
+import React from "react";
+
+//#region src/utils/polymorphic/polymorphic.d.ts
+/**
+ * Polymorphic component props (includes ref)
+ *
+ * @example
+ * ```tsx
+ * type ButtonProps<E extends React.ElementType = 'button'> =
+ *   PolymorphicProps<E, { variant?: 'primary' | 'secondary' }>;
+ * ```
+ */
+type PolymorphicProps<E extends React.ElementType = 'div', Props = object> = Props & {
+  as?: E;
+} & Omit<React.ComponentProps<E>, keyof Props | 'as'>;
+/**
+ * Polymorphic component props without ref
+ */
+type PolymorphicPropsWithoutRef<E extends React.ElementType = 'div', Props = object> = Props & {
+  as?: E;
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof Props | 'as'>;
+//#endregion
+export { PolymorphicProps, PolymorphicPropsWithoutRef };
+//# sourceMappingURL=polymorphic.d.mts.map

package/dist/utils/polymorphic/polymorphic.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic.d.mts","names":[],"sources":["../../../src/utils/polymorphic/polymorphic.ts"],"mappings":";;;;;AAWA;;;;;;;KAAY,gBAAA,WACA,KAAA,CAAM,WAAA,4BAEd,KAAA;EAAU,EAAA,GAAK,CAAA;AAAA,IAAM,IAAA,CAAK,KAAA,CAAM,cAAA,CAAe,CAAA,SAAU,KAAA;;;;KAKjD,0BAAA,WACA,KAAA,CAAM,WAAA,4BAEd,KAAA;EAAU,EAAA,GAAK,CAAA;AAAA,IAAM,IAAA,CACrB,KAAA,CAAM,wBAAA,CAAyB,CAAA,SACzB,KAAA"}

package/dist/utils/splitter/splitter.cjs

@@ -0,0 +1,12 @@
+
+//#region src/utils/splitter/splitter.ts
+function splitVariantProps(props, variantKeys) {
+	const picked = {};
+	const omitted = {};
+	for (const key in props) if (variantKeys.includes(key)) picked[key] = props[key];
+	else omitted[key] = props[key];
+	return [picked, omitted];
+}
+
+//#endregion
+exports.splitVariantProps = splitVariantProps;

package/dist/utils/splitter/splitter.d.cts

@@ -0,0 +1,5 @@
+//#region src/utils/splitter/splitter.d.ts
+declare function splitVariantProps<T extends Record<string, unknown>, K extends readonly string[]>(props: T, variantKeys: K): [Pick<T, K[number]>, Omit<T, K[number]>];
+//#endregion
+export { splitVariantProps };
+//# sourceMappingURL=splitter.d.cts.map

package/dist/utils/splitter/splitter.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.d.cts","names":[],"sources":["../../../src/utils/splitter/splitter.ts"],"mappings":";iBACgB,iBAAA,WACJ,MAAA,+CAAA,CAEV,KAAA,EAAO,CAAA,EAAG,WAAA,EAAa,CAAA,IASM,IAAA,CAAK,CAAA,EAAG,CAAA,WAAY,IAAA,CAAK,CAAA,EAAG,CAAA"}

package/dist/utils/splitter/splitter.d.mts

@@ -0,0 +1,5 @@
+//#region src/utils/splitter/splitter.d.ts
+declare function splitVariantProps<T extends Record<string, unknown>, K extends readonly string[]>(props: T, variantKeys: K): [Pick<T, K[number]>, Omit<T, K[number]>];
+//#endregion
+export { splitVariantProps };
+//# sourceMappingURL=splitter.d.mts.map

package/dist/utils/splitter/splitter.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.d.mts","names":[],"sources":["../../../src/utils/splitter/splitter.ts"],"mappings":";iBACgB,iBAAA,WACJ,MAAA,+CAAA,CAEV,KAAA,EAAO,CAAA,EAAG,WAAA,EAAa,CAAA,IASM,IAAA,CAAK,CAAA,EAAG,CAAA,WAAY,IAAA,CAAK,CAAA,EAAG,CAAA"}

package/dist/utils/splitter/splitter.mjs

@@ -0,0 +1,12 @@
+//#region src/utils/splitter/splitter.ts
+function splitVariantProps(props, variantKeys) {
+	const picked = {};
+	const omitted = {};
+	for (const key in props) if (variantKeys.includes(key)) picked[key] = props[key];
+	else omitted[key] = props[key];
+	return [picked, omitted];
+}
+
+//#endregion
+export { splitVariantProps };
+//# sourceMappingURL=splitter.mjs.map

package/dist/utils/splitter/splitter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.mjs","names":[],"sources":["../../../src/utils/splitter/splitter.ts"],"sourcesContent":["/* eslint-disable */\nexport function splitVariantProps<\n  T extends Record<string, unknown>,\n  K extends readonly string[],\n>(props: T, variantKeys: K) {\n  const picked = {} as any;\n  const omitted = {} as any;\n\n  for (const key in props) {\n    if (variantKeys.includes(key)) picked[key] = props[key];\n    else omitted[key] = props[key];\n  }\n\n  return [picked, omitted] as [Pick<T, K[number]>, Omit<T, K[number]>];\n}\n"],"mappings":";AACA,SAAgB,kBAGd,OAAU,aAAgB;CAC1B,MAAM,SAAS,EAAE;CACjB,MAAM,UAAU,EAAE;AAElB,MAAK,MAAM,OAAO,MAChB,KAAI,YAAY,SAAS,IAAI,CAAE,QAAO,OAAO,MAAM;KAC9C,SAAQ,OAAO,MAAM;AAG5B,QAAO,CAAC,QAAQ,QAAQ"}

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@causw/core",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Core components and utilities for CAUSW Design System - CAU Software Community Service",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d.cts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./styles": {
       "import": "./src/styles/global.css",
@@ -21,11 +26,18 @@
     "src/styles"
   ],
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-toast": "^1.2.15",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "tailwind-merge": "^3.4.0",
-    "@causw/icons": "0.0.8",
-    "@causw/tokens": "0.0.10"
+    "tailwind-variants": "^3.2.2",
+    "@causw/icons": "0.0.9",
+    "@causw/tokens": "0.0.12"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -42,8 +54,8 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --external react --treeshake",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "lint": "eslint src"
   }
 }

package/src/styles/global.css

@@ -3,123 +3,206 @@
 @config '@causw/tokens/config';
 
 * {
-    letter-spacing: -0.02rem;
+  letter-spacing: -0.02rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 @layer utilities {
+  /* Title variants */
+  .typo-title-48-bold {
+    @apply font-sans text-6xl leading-normal font-bold;
+  }
+
+  .typo-title-32-bold {
+    @apply font-sans text-5xl leading-normal font-bold;
+  }
+
+  .typo-title-30-bold {
+    @apply font-sans text-4xl leading-normal font-bold;
+  }
+
+  .typo-title-24-bold {
+    @apply font-sans text-3xl leading-normal font-bold;
+  }
+
+  .typo-title-22-bold {
+    @apply font-sans text-2xl leading-normal font-bold;
+  }
+
+  /* Subtitle variants */
+  .typo-subtitle-20-bold {
+    @apply font-sans text-xl leading-normal font-bold;
+  }
+
+  .typo-subtitle-18-bold {
+    @apply font-sans text-lg leading-normal font-bold;
+  }
+
+  .typo-subtitle-16-bold {
+    @apply font-sans text-base leading-normal font-bold;
+  }
+
+  /* Body variants */
+  .typo-body-18-medium {
+    @apply font-sans text-lg leading-normal font-medium;
+  }
+
+  .typo-body-16-medium {
+    @apply font-sans text-base leading-normal font-medium;
+  }
+
+  .typo-body-16-regular {
+    @apply font-regular font-sans text-base leading-normal;
+  }
+
+  .typo-body-15-semibold {
+    @apply font-sans text-sm leading-normal font-semibold;
+  }
+
+  .typo-body-15-medium {
+    @apply font-sans text-sm leading-normal font-medium;
+  }
+
+  .typo-body-14-semibold {
+    @apply font-sans text-xs leading-normal font-semibold;
+  }
+
+  .typo-body-14-medium {
+    @apply font-sans text-xs leading-normal font-medium;
+  }
+
+  .typo-body-14-regular {
+    @apply font-regular font-sans text-xs leading-normal;
+  }
+
+  .typo-caption-12-semibold {
+    @apply text-2xs font-sans leading-normal font-semibold;
+  }
+
+  .typo-caption-12-medium {
+    @apply text-2xs font-sans leading-normal font-medium;
+  }
+
+  .typo-caption-12-regular {
+    @apply text-2xs font-regular font-sans leading-normal;
+  }
+}
 
-    /* Caption variants */
-    .typo-caption-sm {
-        @apply font-sans text-2xs leading-normal font-regular;
-    }
-
-    .typo-caption-sm-point {
-        @apply font-sans text-2xs leading-normal font-semibold;
-    }
-
-    .typo-caption-md {
-        @apply font-sans text-xs leading-normal font-medium;
-    }
-
-    .typo-caption-md-point {
-        @apply font-sans text-xs leading-normal font-semibold;
-    }
-
-    /* Body2 variants */
-    .typo-body2-sm {
-        @apply font-sans text-xs leading-normal font-regular;
-    }
-
-    .typo-body2-sm-point {
-        @apply font-sans text-xs leading-normal font-semibold;
-    }
+@theme {
+  --z-index-sticky: 250;
+  --z-index-dropdown: 500;
+  --z-index-bottomsheet: 600;
+  --z-index-modal: 1000;
+  --z-index-toast: 1500;
 
-    .typo-body2-md {
-        @apply font-sans text-base leading-normal font-medium;
-    }
+  --animate-toast-hide: toast-hide 100ms ease-in forwards;
+  --animate-toast-slide-in: toast-slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards;
 
-    .typo-body2-md-point {
-        @apply font-sans text-base leading-normal font-semibold;
-    }
+  --animate-fade-in: fade-in 200ms ease-out;
+  --animate-fade-out: fade-out 200ms ease-in;
+  --animate-zoom-in: zoom-in 200ms ease-out;
+  --animate-zoom-out: zoom-out 200ms ease-in;
 
-    /* Body variants */
-    .typo-body-sm {
-        @apply font-sans text-base leading-tight font-regular;
+  @keyframes fade-in {
+    from {
+      opacity: 0;
     }
 
-    .typo-body-sm-point {
-        @apply font-sans text-base leading-normal font-bold;
+    to {
+      opacity: 1;
     }
+  }
 
-    .typo-body-md {
-        @apply font-sans text-lg leading-normal font-medium;
+  @keyframes fade-out {
+    from {
+      opacity: 1;
     }
 
-    .typo-body-md-point {
-        @apply font-sans text-lg leading-normal font-bold;
+    to {
+      opacity: 0;
     }
+  }
 
-    /* Subtitle variants */
-    .typo-subtitle-sm {
-        @apply font-sans text-lg leading-normal font-medium;
+  @keyframes zoom-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
     }
 
-    .typo-subtitle-sm-point {
-        @apply font-sans text-lg leading-normal font-bold;
+    to {
+      opacity: 1;
+      transform: scale(1);
     }
+  }
 
-    .typo-subtitle-md {
-        @apply font-sans text-xl leading-normal font-medium;
+  @keyframes zoom-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
     }
 
-    .typo-subtitle-md-point {
-        @apply font-sans text-xl leading-normal font-bold;
+    to {
+      opacity: 0;
+      transform: scale(0.95);
     }
+  }
 
-    /* Title variants */
-    .typo-title-sm {
-        @apply font-sans text-2xl leading-normal font-bold;
+  @keyframes toast-hide {
+    from {
+      opacity: 1;
     }
 
-    .typo-title-md {
-        @apply font-sans text-5xl leading-normal font-bold;
+    to {
+      opacity: 0;
     }
+  }
 
-    /* Head variants */
-    .typo-head-sm {
-        @apply font-sans text-4xl leading-normal font-bold;
+  @keyframes toast-slide-in {
+    from {
+      transform: translateY(100%);
     }
 
-    .typo-head-md {
-        @apply font-sans text-6xl leading-normal font-bold;
+    to {
+      transform: translateY(0);
     }
+  }
 
-    /* Fixed size variants */
-    .typo-fixed-12 {
-        @apply font-sans text-2xs leading-normal font-medium;
+  @keyframes toast-swipe-out {
+    from {
+      transform: translateY(var(--radix-toast-swipe-end-y));
     }
 
-    .typo-fixed-14 {
-        @apply font-sans text-xs leading-normal font-medium;
+    to {
+      transform: translateY(100%);
     }
+  }
 
-    .typo-fixed-15 {
-        @apply font-sans text-sm leading-normal font-semibold;
-    }
+  --animate-overlay-show: fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-overlay-hide: fade-out 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-content-show: content-show 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-content-hide: content-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
 
-    .typo-fixed-16 {
-        @apply font-sans text-base leading-normal font-medium;
+  @keyframes content-show {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
     }
-
-    .typo-fixed-18 {
-        @apply font-sans text-lg leading-normal font-medium;
+    to {
+      opacity: 1;
+      transform: translate(0);
     }
+  }
 
-    .typo-fixed-20 {
-        @apply font-sans text-xl leading-normal font-semibold;
+  @keyframes content-hide {
+    from {
+      opacity: 1;
+      transform: translateY(0);
     }
-
-    .typo-fixed-24 {
-        @apply font-sans text-3xl leading-normal font-bold;
+    to {
+      opacity: 0;
+      transform: translateY(100%);
     }
-}
+  }
+}