@thangph2146/lexical-editor 0.0.6 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangph2146/lexical-editor",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "description": "Rich Text Editor library based on Lexical for React/Next.js",
   "license": "MIT",
   "type": "module",
@@ -20,7 +20,8 @@
     "dev": "tsup --watch",
     "lint": "eslint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build && pnpm typecheck"
   },
   "dependencies": {
     "@lexical/code": "^0.38.2",

package/src/editor-ui/content-editable.tsx

@@ -1,42 +1,30 @@
-import { JSX } from "react"
-import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable"
-import { cn } from "../lib/utils"
-
-type Props = {
-  placeholder: string
-  className?: string
-  placeholderClassName?: string
-  placeholderDefaults?: boolean // apply default positioning/padding for placeholder
-}
-
-export function ContentEditable({
-  placeholder,
-  className,
-  placeholderClassName,
-  placeholderDefaults = true,
-}: Props): JSX.Element {
-  const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
-
-  return (
-    <LexicalContentEditable
-      className={cn(
-        "ContentEditable__root relative block focus:outline-none",
-        !isReadOnlyOrReview && "min-h-72 px-8 py-4",
-        className
-      )}
-      aria-placeholder={placeholder}
-      aria-label={placeholder || "Editor nội dung"}
-      placeholder={
-        <div
-          className={cn(
-            placeholderClassName,
-            "text-muted-foreground pointer-events-none select-none",
-            placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
-          )}
-        >
-          {placeholder}
-        </div>
-      }
-    />
-  )
-}
+import { JSX } from "react"
+import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable"
+import { cn } from "../lib/utils"
+
+type Props = {
+  placeholder?: string
+  className?: string
+  placeholderClassName?: string
+  placeholderDefaults?: boolean // apply default positioning/padding for placeholder
+}
+
+export function ContentEditable({
+  placeholder,
+  className,
+  placeholderClassName,
+  placeholderDefaults = true,
+}: Props): JSX.Element {
+  const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
+
+  return (
+    <LexicalContentEditable
+      className={cn(
+        "ContentEditable__root relative block focus:outline-none",
+        !isReadOnlyOrReview && "min-h-72 px-8 py-4",
+        className
+      )}
+      aria-label={"Editor nội dung"}
+    />
+  )
+}

package/src/editor-x/plugins.tsx

@@ -110,6 +110,7 @@ import { TABLE } from "../transformers/markdown-table-transformer"
 import { TWEET } from "../transformers/markdown-tweet-transformer"
 import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
 import { Separator } from "../ui/separator"
+import { Flex } from "../ui/flex"
 
 export function Plugins({
   readOnly = false,
@@ -227,11 +228,13 @@ export function Plugins({
             <div className={cn("editor-relative-full")}>
               <div className={cn("editor-relative-full")} ref={onRef}>
                 <ContentEditable
-                  placeholder={readOnly ? "" : placeholder}
+                  placeholder=""
                   className={cn(
                     "editor-content-editable",
                     readOnly && "editor-content-editable--readonly"
                   )}
+                  placeholderClassName="editor-placeholder"
+                  placeholderDefaults={false}
                 />
               </div>
             </div>
@@ -349,11 +352,11 @@ export function Plugins({
       {!readOnly && (
         <ActionsPlugin>
           <div className="editor-actions-bar">
-            <div className="editor-flex-shrink-0">
+            <Flex align="center" className="editor-flex-shrink-0">
               <CounterCharacterPlugin charset="UTF-16" />
-            </div>
+            </Flex>
             <div className="editor-flex-1" />
-            <div className="editor-flex-shrink-0 editor-flex-end">
+            <Flex align="center" justify="end" gap={1} wrap="nowrap" className="editor-flex-shrink-0">
               <SpeechToTextPlugin />
               <ShareContentPlugin />
               <ImportExportPlugin />
@@ -376,7 +379,7 @@ export function Plugins({
               <EditModeTogglePlugin />
               <ClearEditorActionPlugin />
               <TreeViewPlugin />
-            </div>
+            </Flex>
           </div>
         </ActionsPlugin>
       )}

package/src/plugins/images-plugin.tsx

@@ -41,6 +41,7 @@ import { Button } from "../ui/button"
 import { DialogFooter } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
+import { Flex } from "../ui/flex"
 import {
   Tabs,
   TabsContent,
@@ -337,9 +338,9 @@ export function InsertImageUploadsDialogBody({
       <div className="editor-form-item">
         <Label>Chọn hình ảnh từ thư viện</Label>
         {isLoading ? (
-          <div className="editor-flex-center-justify-py-8">
+          <Flex align="center" justify="center" className="editor-py-8">
             <Loader2 className="editor-loader" />
-          </div>
+          </Flex>
         ) : !folderTree || (folderTree.subfolders.length === 0 && folderTree.images.length === 0) ? (
           <div className="editor-empty-state">
             <TypographySpanSmallMuted>Chưa có hình ảnh nào được upload</TypographySpanSmallMuted>

package/src/plugins/layout-plugin.tsx

@@ -43,6 +43,7 @@ import {
   LayoutItemNode,
 } from "../nodes/layout-item-node"
 import { Button } from "../ui/button"
+import { NumberInput } from "../ui/number-input"
 import {
   Select,
   SelectContent,
@@ -62,7 +63,6 @@ import {
   ColorPickerPresets,
   ColorPickerTrigger,
 } from "../editor-ui/color-picker"
-import { Input } from "../ui/input"
 import { Flex } from "../ui/flex"
 import { useEditorModal } from "../editor-hooks/use-modal"
 import { logger } from "../lib/logger"
@@ -82,14 +82,16 @@ type InsertLayoutPayload =
   | {
       template: string
       itemBackgroundColor?: string
-      itemPaddingPx?: number
+      itemPaddingXPx?: number
+      itemPaddingYPx?: number
       itemBorderRadiusPx?: number
     }
 
 type LayoutDialogValues = {
   template: string
   itemBackgroundColor: string
-  itemPaddingPx: number
+  itemPaddingXPx: number
+  itemPaddingYPx: number
   itemBorderRadiusPx: number
 }
 
@@ -116,13 +118,15 @@ export function InsertLayoutDialog({
   const [backgroundColor, setBackgroundColor] = useState(
     initialValues?.itemBackgroundColor ?? "#ffffff"
   )
-  const [paddingPx, setPaddingPx] = useState(initialValues?.itemPaddingPx ?? 12)
+  const [paddingXPx, setPaddingXPx] = useState(initialValues?.itemPaddingXPx ?? 12)
+  const [paddingYPx, setPaddingYPx] = useState(initialValues?.itemPaddingYPx ?? 12)
   const [borderRadiusPx, setBorderRadiusPx] = useState(
     initialValues?.itemBorderRadiusPx ?? 8
   )
   const layoutRef = useRef(layout)
   const backgroundColorRef = useRef(backgroundColor)
-  const paddingPxRef = useRef(paddingPx)
+  const paddingXPxRef = useRef(paddingXPx)
+  const paddingYPxRef = useRef(paddingYPx)
   const borderRadiusPxRef = useRef(borderRadiusPx)
 
   useEffect(() => {
@@ -132,8 +136,11 @@ export function InsertLayoutDialog({
     backgroundColorRef.current = backgroundColor
   }, [backgroundColor])
   useEffect(() => {
-    paddingPxRef.current = paddingPx
-  }, [paddingPx])
+    paddingXPxRef.current = paddingXPx
+  }, [paddingXPx])
+  useEffect(() => {
+    paddingYPxRef.current = paddingYPx
+  }, [paddingYPx])
   useEffect(() => {
     borderRadiusPxRef.current = borderRadiusPx
   }, [borderRadiusPx])
@@ -143,10 +150,16 @@ export function InsertLayoutDialog({
     setBackgroundColor(value)
   }
 
-  const onPaddingChange = (next: number) => {
+  const onPaddingXChange = (next: number) => {
     const value = Math.min(Math.max(next, 0), 64)
-    paddingPxRef.current = value
-    setPaddingPx(value)
+    paddingXPxRef.current = value
+    setPaddingXPx(value)
+  }
+
+  const onPaddingYChange = (next: number) => {
+    const value = Math.min(Math.max(next, 0), 64)
+    paddingYPxRef.current = value
+    setPaddingYPx(value)
   }
 
   const onBorderRadiusChange = (next: number) => {
@@ -160,7 +173,8 @@ export function InsertLayoutDialog({
     const values: LayoutDialogValues = {
       template: layoutRef.current,
       itemBackgroundColor: backgroundColorRef.current,
-      itemPaddingPx: paddingPxRef.current,
+      itemPaddingXPx: paddingXPxRef.current,
+      itemPaddingYPx: paddingYPxRef.current,
       itemBorderRadiusPx: borderRadiusPxRef.current,
     }
     logger.info("[Layout] Submit dialog values", {
@@ -177,7 +191,7 @@ export function InsertLayoutDialog({
   }
 
   return (
-    <>
+    <Flex direction="column" gap={4}>
       <Select onValueChange={setLayout} value={layout}>
         <SelectTrigger className="editor-input-lg editor-w-full">
           <SelectValue placeholder={buttonLabel} />
@@ -191,7 +205,7 @@ export function InsertLayoutDialog({
         </SelectContent>
       </Select>
       <div className="editor-layout-dialog-grid">
-        <div className="editor-layout-dialog-group">
+        <Flex direction="column" gap={1.5}>
           <div className="editor-text-xs-muted">Background</div>
           <ColorPicker
             modal
@@ -227,48 +241,37 @@ export function InsertLayoutDialog({
               <ColorPickerPresets />
             </ColorPickerContent>
           </ColorPicker>
-        </div>
-        <div className="editor-layout-dialog-group">
-          <div className="editor-text-xs-muted">Padding (px)</div>
-          <Input
-            type="number"
+        </Flex>
+        <Flex direction="column" gap={1.5}>
+          <div className="editor-text-xs-muted">Padding X (px)</div>
+          <NumberInput
             min={0}
             max={64}
-            step={1}
-            value={paddingPx}
-            onChange={(event) => {
-              const next = Number.parseInt(event.target.value, 10)
-              if (Number.isFinite(next)) {
-                onPaddingChange(next)
-              } else {
-                onPaddingChange(0)
-              }
-            }}
-            className="editor-input-lg editor-w-full"
+            value={paddingXPx}
+            onValueChange={onPaddingXChange}
           />
-        </div>
-        <div className="editor-layout-dialog-group">
+        </Flex>
+        <Flex direction="column" gap={1.5}>
+          <div className="editor-text-xs-muted">Padding Y (px)</div>
+          <NumberInput
+            min={0}
+            max={64}
+            value={paddingYPx}
+            onValueChange={onPaddingYChange}
+          />
+        </Flex>
+        <Flex direction="column" gap={1.5}>
           <div className="editor-text-xs-muted">Border radius (px)</div>
-          <Input
-            type="number"
+          <NumberInput
             min={0}
             max={64}
-            step={1}
             value={borderRadiusPx}
-            onChange={(event) => {
-              const next = Number.parseInt(event.target.value, 10)
-              if (Number.isFinite(next)) {
-                onBorderRadiusChange(next)
-              } else {
-                onBorderRadiusChange(0)
-              }
-            }}
-            className="editor-input-lg editor-w-full"
+            onValueChange={onBorderRadiusChange}
           />
-        </div>
+        </Flex>
       </div>
       <Button onClick={onClick}>{submitLabel}</Button>
-    </>
+    </Flex>
   )
 }
 
@@ -339,29 +342,42 @@ export function LayoutPlugin(): JSX.Element | null {
       return match?.[1]?.trim()
     }
 
-    const extractNumericStyle = (style: string, property: string): number | undefined => {
+    const extractNumericStyle = (style: string, property: string): number[] | undefined => {
       const value = extractStyleValue(style, property)
       if (!value) {
         return undefined
       }
-      const match = value.match(/^(\d+)px$/i)
-      if (!match?.[1]) {
-        return undefined
-      }
-      const parsed = Number.parseInt(match[1], 10)
-      return Number.isFinite(parsed) ? parsed : undefined
+      // Remove !important and split by whitespace
+      const values = value.replace(/!important/gi, "").trim().split(/\s+/)
+      const parsedValues = values
+        .map((v) => {
+          const match = v.match(/^(\d+)px/i)
+          if (!match?.[1]) return null
+          const parsed = Number.parseInt(match[1], 10)
+          return Number.isFinite(parsed) ? parsed : null
+        })
+        .filter((v): v is number => v !== null)
+
+      if (parsedValues.length === 0) return undefined
+      return parsedValues
     }
 
     const buildLayoutItemStyle = ({
       itemBackgroundColor,
-      itemPaddingPx,
+      itemPaddingXPx,
+      itemPaddingYPx,
       itemBorderRadiusPx,
     }: LayoutDialogValues): string => {
       const itemStyles: string[] = []
       if (itemBackgroundColor.trim()) {
         itemStyles.push(`background-color: ${itemBackgroundColor.trim()}`)
       }
-      itemStyles.push(`padding: ${Math.min(Math.max(itemPaddingPx, 0), 64)}px`)
+      itemStyles.push(
+        `padding: ${Math.min(Math.max(itemPaddingYPx, 0), 64)}px ${Math.min(
+          Math.max(itemPaddingXPx, 0),
+          64
+        )}px`
+      )
       itemStyles.push(
         `border-radius: ${Math.min(Math.max(itemBorderRadiusPx, 0), 64)}px`
       )
@@ -376,7 +392,10 @@ export function LayoutPlugin(): JSX.Element | null {
       }
 
       const background = values.itemBackgroundColor.trim()
-      const padding = `${Math.min(Math.max(values.itemPaddingPx, 0), 64)}px`
+      const padding = `${Math.min(Math.max(values.itemPaddingYPx, 0), 64)}px ${Math.min(
+        Math.max(values.itemPaddingXPx, 0),
+        64
+      )}px`
       const borderRadius = `${Math.min(Math.max(values.itemBorderRadiusPx, 0), 64)}px`
       if (background) {
         element.style.setProperty("background-color", background)
@@ -438,6 +457,9 @@ export function LayoutPlugin(): JSX.Element | null {
         }
 
         const style = layoutItem.getStyle()
+        const paddingValues = extractNumericStyle(style, "padding")
+        const borderRadiusValues = extractNumericStyle(style, "border-radius")
+
         payload = {
           containerKey: parentContainer.getKey(),
           layoutItemKey: layoutItem.getKey(),
@@ -445,8 +467,9 @@ export function LayoutPlugin(): JSX.Element | null {
             template: parentContainer.getTemplateColumns(),
             itemBackgroundColor:
               extractStyleValue(style, "background-color") ?? "#ffffff",
-            itemPaddingPx: extractNumericStyle(style, "padding") ?? 12,
-            itemBorderRadiusPx: extractNumericStyle(style, "border-radius") ?? 8,
+            itemPaddingXPx: paddingValues?.[1] ?? paddingValues?.[0] ?? 12,
+            itemPaddingYPx: paddingValues?.[0] ?? 12,
+            itemBorderRadiusPx: borderRadiusValues?.[0] ?? 8,
           },
         }
         logger.debug("[Layout] Resolved payload from target", payload)
@@ -566,12 +589,19 @@ export function LayoutPlugin(): JSX.Element | null {
               typeof payload === "string"
                 ? undefined
                 : payload.itemBackgroundColor?.trim()
-            const itemPaddingPx =
+            const itemPaddingXPx =
+              typeof payload === "string"
+                ? undefined
+                : typeof payload.itemPaddingXPx === "number" &&
+                    Number.isFinite(payload.itemPaddingXPx)
+                  ? Math.min(Math.max(payload.itemPaddingXPx, 0), 64)
+                  : undefined
+            const itemPaddingYPx =
               typeof payload === "string"
                 ? undefined
-                : typeof payload.itemPaddingPx === "number" &&
-                    Number.isFinite(payload.itemPaddingPx)
-                  ? Math.min(Math.max(payload.itemPaddingPx, 0), 64)
+                : typeof payload.itemPaddingYPx === "number" &&
+                    Number.isFinite(payload.itemPaddingYPx)
+                  ? Math.min(Math.max(payload.itemPaddingYPx, 0), 64)
                   : undefined
             const itemBorderRadiusPx =
               typeof payload === "string"
@@ -584,7 +614,8 @@ export function LayoutPlugin(): JSX.Element | null {
             const itemStyle = buildLayoutItemStyle({
               template,
               itemBackgroundColor: itemBackgroundColor ?? "#ffffff",
-              itemPaddingPx: itemPaddingPx ?? 12,
+              itemPaddingXPx: itemPaddingXPx ?? 12,
+              itemPaddingYPx: itemPaddingYPx ?? 12,
               itemBorderRadiusPx: itemBorderRadiusPx ?? 8,
             })
 

package/src/themes/_mixins.scss

@@ -26,9 +26,14 @@
   justify-content: space-between;
 }
 
+@mixin flex-row {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
 @mixin flex-col {
-  display: flex;
-  flex-direction: column;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 @mixin flex-center-justify {
@@ -63,19 +68,19 @@
 }
 
 @mixin shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
 }
 
 @mixin shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 @mixin shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
 }
 
 @mixin shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
 }
 
 @mixin absolute-full {
@@ -138,7 +143,7 @@
 // --- Unified Hover Styles ---
 @mixin editor-hover-base {
   transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 @mixin editor-active-base {

package/src/themes/_variables.scss

@@ -172,7 +172,8 @@ $editor-popover-max-height: 300px !default;
  $editor-format-select-width: 72px !default;
  $editor-floating-toolbar-max-width: 560px !default;
  $editor-color-picker-height: 160px !default;
- $editor-scroll-area-max-height: 350px !default;
+$editor-color-picker-width: 380px !default;
+$editor-scroll-area-max-height: 350px !default;
  $editor-link-editor-max-width: 400px !default;
  $editor-component-picker-width: 250px !default;
  $editor-mentions-width: 200px !default;

package/src/themes/core/_reset.scss

@@ -11,6 +11,15 @@
   }
 }
 
+// Global resets
+*, *::before, *::after {
+  box-sizing: border-box;
+
+  @supports (color: color-mix(in lab, red, red)) {
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+}
+
 // Lexical Editor Root
 .lexical-editor-root {
   font-family: $editor-font-family !important;
@@ -24,12 +33,7 @@
   text-align: left !important;
   box-sizing: border-box !important;
 
-  // Reset common elements
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  p, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
+  p, div, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
     margin: 0 !important;
     padding: 0;
     border: 0 !important;

package/src/themes/plugins/_color-picker.scss

@@ -3,6 +3,7 @@
 
 .editor-color-picker-content {
   @include flex-col;
+  width: $editor-color-picker-width;
   gap: $editor-gap-4;
   padding: $editor-gap-4;
 }

package/src/themes/plugins/_layout.scss

@@ -4,17 +4,13 @@
 .editor-layout-dialog-grid {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: $editor-gap-3;
+  gap: $editor-gap-4;
   
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  @media (min-width: 480px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-.editor-layout-dialog-group {
-  @include flex-col;
-  gap: $editor-gap-1-5;
-}
 
 .editor-layout-color-trigger {
   height: $editor-control-size-xl; // h-11

package/src/themes/plugins/_list-color.scss

@@ -2,6 +2,8 @@
 @use "../mixins" as *;
 
 .editor-list-color-dialog {
+  @include flex-col;
+  gap: $editor-gap-4;
   padding: $editor-gap-2 0;
   animation: editor-fade-in $editor-transition-slow;
 }

package/src/themes/plugins/_menus-and-pickers.scss

@@ -121,6 +121,8 @@
   overflow-x: auto;
   flex-wrap: nowrap;
   border-top: $editor-border-width solid var(--border);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   padding: $editor-gap-1-5 $editor-gap-3;
   @include backdrop-blur($editor-dialog-overlay-blur * 2, color-mix(in srgb, var(--background), transparent 50%));
   

package/src/themes/plugins/_toolbar.scss

@@ -8,11 +8,11 @@
   @include flex-center;
   flex-wrap: wrap;
   gap: $editor-gap-1;
-  border-bottom: $editor-border-width solid var(--border);
-  border-top-left-radius: $editor-border-radius;
-  border-top-right-radius: $editor-border-radius;
+  border-bottom: $editor-border-width solid var(--border) !important;
+  border-top-left-radius: $editor-border-radius !important;
+  border-top-right-radius: $editor-border-radius !important;
   @include backdrop-blur($editor-dialog-overlay-blur, rgba(255, 255, 255, 0.8));
-  padding: $editor-gap-1;
+  padding: $editor-gap-2 !important;
   @include shadow-sm;
   width: 100%;
   overflow-x: visible;
@@ -23,7 +23,7 @@
 .editor-toolbar-group {
   @include flex-center;
   gap: $editor-gap-1;
-  padding: $editor-gap-1;
+  padding: $editor-gap-1 !important;
   @include rounded-md;
 }
 
@@ -31,6 +31,6 @@
 
 .editor-toolbar-separator {
   height: $editor-icon-size-lg !important; // h-6 (standard separator height)
-  margin-left: $editor-gap-1;
-  margin-right: $editor-gap-1;
+  margin-left: $editor-gap-1 !important;
+  margin-right: $editor-gap-1 !important;
 }

package/src/themes/ui-components/_button.scss

@@ -17,6 +17,7 @@
   position: relative;
   padding: $editor-gap-2 $editor-gap-4;
   box-sizing: border-box; // Ensure consistent sizing
+  @include shadow-sm;
   @include editor-button-interactive;
 
   &:disabled {
@@ -53,7 +54,6 @@
     background-color: var(--primary);
     color: var(--primary-foreground);
     border-color: var(--primary);
-    @include shadow-sm;
 
     &:hover {
       background-color: color-mix(in srgb, var(--primary), black 10%);
@@ -65,7 +65,6 @@
     background-color: var(--destructive);
     color: var(--destructive-foreground);
     border-color: var(--destructive);
-    @include shadow-sm;
 
     &:hover {
       background-color: color-mix(in srgb, var(--destructive), black 10%);
@@ -114,11 +113,12 @@
     border: none;
     padding: 0;
     height: auto;
+    box-shadow: none !important;
 
     &:hover {
       text-decoration-line: underline;
       transform: none;
-      box-shadow: none;
+      box-shadow: none !important;
     }
   }