fulldev-ui 0.9.2 → 0.10.0

package/src/components/ui/slider/slider.astro

@@ -47,14 +47,16 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   data-thumb-alignment={thumbAlignment}
   data-disabled={disabled}
   class={cn(
-    "relative flex touch-none items-center select-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+    "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
     className
   )}
   {...props}
 >
   <div
     data-slot="slider-control"
-    class="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
+    data-orientation={orientation}
+    data-disabled={disabled}
+    class="relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
   >
     <div
       data-slot="slider-track"
@@ -62,7 +64,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
     >
       <div
         data-slot="slider-range"
-        class="bg-primary rounded-full select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        class="bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
       >
       </div>
     </div>
@@ -70,7 +72,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
       Array.from({ length: thumbCount }).map(() => (
         <div
           data-slot="slider-thumb"
-          class="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+          class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
         />
       ))
     }

package/src/components/ui/spinner/spinner.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import LoaderCircle from "@lucide/astro/icons/loader-circle"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"svg"> & {
   color?: string
@@ -15,10 +15,10 @@ type Props = HTMLAttributes<"svg"> & {
 const { class: className, ...props } = Astro.props
 ---
 
-<Icon
-  {...props}
+<LoaderCircle
+  data-slot="spinner"
   role="status"
   aria-label="Loading"
-  name="loader-circle"
   class={cn("size-4 animate-spin", className)}
+  {...props}
 />

package/src/components/ui/switch/switch.astro

@@ -29,7 +29,7 @@ const {
 
 const initialChecked = defaultChecked === true
 const switchStyle =
-  "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default"
+  "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default"
 const switchSizeStyle = {
   sm: "h-[14px] w-[24px]",
   default: "h-[18.4px] w-[32px]",

package/src/components/ui/theme-toggle/theme-toggle.astro

@@ -1,9 +1,10 @@
 ---
 import type { ComponentProps } from "astro/types"
+import Moon from "@lucide/astro/icons/moon"
+import Sun from "@lucide/astro/icons/sun"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 
 type Props = ComponentProps<typeof Button>
 
@@ -23,8 +24,8 @@ const {
   class={cn("relative", className)}
   {...props}
 >
-  <Icon name="sun" class="dark:hidden" />
-  <Icon name="moon" class="hidden dark:block" />
+  <Sun class="dark:hidden" />
+  <Moon class="hidden dark:block" />
   <span class="sr-only">Toggle theme</span>
 </Button>
 

package/src/components/ui/tooltip/tooltip-content.astro

@@ -35,7 +35,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="z-50"
+    class="isolate z-50"
   >
     <div
       data-slot="tooltip-content"

package/src/components/ui/typography/typography-a.astro

@@ -3,12 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"a">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"a"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<a data-slot="typography-a" class={cn(className)} {...props}>
+<a data-slot="typography-a" data-size={size} class={cn(className)} {...props}>
   <slot />
 </a>
 
@@ -16,7 +19,19 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-a"],
-  [data-slot="typography"] a:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > a:not([data-slot]) {
     @apply text-primary font-medium underline underline-offset-4;
   }
+
+  [data-slot="typography-a"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-a"][data-size="default"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-a"][data-size="lg"] {
+    @apply text-lg;
+  }
 </style>

package/src/components/ui/typography/typography-blockquote.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"blockquote">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"blockquote"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<blockquote data-slot="typography-blockquote" class={cn(className)} {...props}>
+<blockquote
+  data-slot="typography-blockquote"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </blockquote>
 
@@ -16,8 +24,20 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-blockquote"],
-  [data-slot="typography"]
-    blockquote:not(.no-typography):not(.no-typography *) {
-    @apply border-l-2 pl-6 text-base italic;
+  [data-slot="typography"] > blockquote {
+    @apply mt-6 border-l-2 pl-6 italic;
+  }
+
+  [data-slot="typography-blockquote"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-blockquote"][data-size="default"],
+  [data-slot="typography"] > blockquote {
+    @apply text-base;
+  }
+
+  [data-slot="typography-blockquote"][data-size="lg"] {
+    @apply text-lg;
   }
 </style>

package/src/components/ui/typography/typography-h1.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h1"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,23 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h1"],
-  [data-slot="typography"] h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h1 {
     @apply scroll-m-20 font-semibold tracking-tight text-balance;
   }
 
   [data-slot="typography-h1"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h1 {
     @apply text-3xl;
   }
 
   [data-slot="typography-h1"][data-size="default"],
-  [data-slot="typography"] h1:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h1,
+  [data-slot="typography"][data-size="default"] > h1 {
     @apply text-4xl;
   }
 
   [data-slot="typography-h1"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h1 {
     @apply text-5xl;
   }
 </style>

package/src/components/ui/typography/typography-h2.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h2"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,28 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h2"],
-  [data-slot="typography"] h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h2 {
     @apply scroll-m-20 font-semibold tracking-tight;
   }
 
   [data-slot="typography-h2"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h2 {
     @apply text-2xl;
   }
 
   [data-slot="typography-h2"][data-size="default"],
-  [data-slot="typography"] h2:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h2,
+  [data-slot="typography"][data-size="default"] > h2 {
     @apply text-3xl;
   }
 
   [data-slot="typography-h2"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h2 {
     @apply text-4xl;
   }
+
+  [data-slot="typography-h2"]:first-child,
+  [data-slot="typography"] > h2:first-child {
+    @apply mt-0;
+  }
 </style>

package/src/components/ui/typography/typography-h3.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h3"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,23 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h3"],
-  [data-slot="typography"] h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h3 {
     @apply scroll-m-20 font-semibold tracking-tight;
   }
 
   [data-slot="typography-h3"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h3 {
     @apply text-xl;
   }
 
   [data-slot="typography-h3"][data-size="default"],
-  [data-slot="typography"] h3:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h3,
+  [data-slot="typography"][data-size="default"] > h3 {
     @apply text-2xl;
   }
 
   [data-slot="typography-h3"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h3 {
     @apply text-3xl;
   }
 </style>

package/src/components/ui/typography/typography-h4.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h4"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,23 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h4"],
-  [data-slot="typography"] h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h4 {
     @apply scroll-m-20 font-semibold tracking-tight;
   }
 
   [data-slot="typography-h4"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h4 {
     @apply text-lg;
   }
 
   [data-slot="typography-h4"][data-size="default"],
-  [data-slot="typography"] h4:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h4,
+  [data-slot="typography"][data-size="default"] > h4 {
     @apply text-xl;
   }
 
   [data-slot="typography-h4"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h4 {
     @apply text-2xl;
   }
 </style>

package/src/components/ui/typography/typography-inline-code.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"code">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"code"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<code data-slot="typography-inline-code" class={cn(className)} {...props}>
+<code
+  data-slot="typography-inline-code"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </code>
 
@@ -16,16 +24,24 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-inline-code"],
-  [data-slot="typography"]
-    :not(pre)
-    > code:not(.no-typography):not(.no-typography *) {
-    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm;
+  [data-slot="typography"] :not(pre) > code {
+    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono font-semibold;
   }
 
-  [data-slot="typography"]
-    table:not(.no-typography):not(.no-typography *)
-    :not(pre)
-    > code:not(.no-typography):not(.no-typography *) {
-    @apply rounded-md text-sm leading-5;
+  [data-slot="typography-inline-code"][data-size="sm"] {
+    @apply text-xs;
+  }
+
+  [data-slot="typography-inline-code"][data-size="default"],
+  [data-slot="typography"] :not(pre) > code {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-inline-code"][data-size="lg"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography"] > table :not(pre) > code {
+    @apply rounded-md text-sm leading-5 font-normal;
   }
 </style>

package/src/components/ui/typography/typography-lead.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"p">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"p"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<p data-slot="typography-lead" class={cn(className)} {...props}>
+<p
+  data-slot="typography-lead"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </p>
 
@@ -16,6 +24,23 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-lead"] {
-    @apply text-muted-foreground text-lg;
+    @apply text-muted-foreground;
+  }
+
+  [data-slot="typography-lead"][data-size="sm"],
+  [data-slot="typography"][data-size="sm"] > [data-slot="typography-lead"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-lead"][data-size="default"],
+  [data-slot="typography"] > [data-slot="typography-lead"],
+  [data-slot="typography"][data-size="default"]
+    > [data-slot="typography-lead"] {
+    @apply text-lg;
+  }
+
+  [data-slot="typography-lead"][data-size="lg"],
+  [data-slot="typography"][data-size="lg"] > [data-slot="typography-lead"] {
+    @apply text-xl;
   }
 </style>

package/src/components/ui/typography/typography-list-item.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"li">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"li"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<li data-slot="typography-list-item" class={cn(className)} {...props}>
+<li
+  data-slot="typography-list-item"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </li>
 
@@ -17,12 +25,20 @@ const { class: className, ...props } = Astro.props
 
   [data-slot="typography-list-item"],
   [data-slot="typography-list"] > li,
-  [data-slot="typography"]
-    ul:not(.no-typography):not(.no-typography *)
-    > li:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"]
-    ol:not(.no-typography):not(.no-typography *)
-    > li:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > ul > li,
+  [data-slot="typography"] > ol > li {
     @apply mt-2;
   }
+
+  [data-slot="typography-list-item"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-list-item"][data-size="default"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-list-item"][data-size="lg"] {
+    @apply text-lg;
+  }
 </style>

package/src/components/ui/typography/typography-list.astro

@@ -1,18 +1,22 @@
 ---
-import type { HTMLAttributes } from "astro/types"
+import type { HTMLTag, Polymorphic } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"ul"> &
-  HTMLAttributes<"ol"> & {
-    as?: "ul" | "ol"
-  }
+type Size = "sm" | "default" | "lg"
+type Props<Tag extends "ul" | "ol"> = Polymorphic<{ as: Tag; size?: Size }>
 
-const { as: Tag = "ul", class: className, ...props } = Astro.props
+const {
+  as: Tag = "ul",
+  class: className,
+  size = "default",
+  ...props
+} = Astro.props
 ---
 
 <Tag
   data-slot="typography-list"
+  data-size={size}
   data-ordered={Tag === "ol" ? "" : undefined}
   class={cn(className)}
   {...props}
@@ -24,18 +28,32 @@ const { as: Tag = "ul", class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-list"],
-  [data-slot="typography"] ul:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
-    @apply ml-6 text-base;
+  [data-slot="typography"] > ul,
+  [data-slot="typography"] > ol {
+    @apply my-6 ml-6;
+  }
+
+  [data-slot="typography-list"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-list"][data-size="default"],
+  [data-slot="typography"] > ul,
+  [data-slot="typography"] > ol {
+    @apply text-base;
+  }
+
+  [data-slot="typography-list"][data-size="lg"] {
+    @apply text-lg;
   }
 
   [data-slot="typography-list"]:not([data-ordered]),
-  [data-slot="typography"] ul:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > ul {
     @apply list-disc;
   }
 
   [data-slot="typography-list"][data-ordered],
-  [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > ol {
     @apply list-decimal;
   }
 

package/src/components/ui/typography/typography-p.astro

@@ -3,12 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"p">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"p"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<p data-slot="typography-p" class={cn(className)} {...props}>
+<p data-slot="typography-p" data-size={size} class={cn(className)} {...props}>
   <slot />
 </p>
 
@@ -16,8 +19,25 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-p"],
-  [data-slot="typography"]
-    p:not([data-slot]):not(.no-typography):not(.no-typography *) {
-    @apply text-base leading-7;
+  [data-slot="typography"] > p {
+    @apply leading-7;
+  }
+
+  [data-slot="typography-p"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-p"][data-size="default"],
+  [data-slot="typography"] > p {
+    @apply text-base;
+  }
+
+  [data-slot="typography-p"][data-size="lg"] {
+    @apply text-lg;
+  }
+
+  [data-slot="typography-p"]:not(:first-child),
+  [data-slot="typography"] > p:not(:first-child) {
+    @apply mt-6;
   }
 </style>