lightnet 3.10.8 → 3.12.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # lightnet
 
+## 3.12.0
+
+### Minor Changes
+
+- [#351](https://github.com/LightNetDev/LightNet/pull/351) [`a1f63bf`](https://github.com/LightNetDev/LightNet/commit/a1f63bfa30448fdf58bfb1ff24007caa750349e0) Thanks [@smn-cds](https://github.com/smn-cds)! - Add an external fallback UI for audio content so non-mp3 URLs show a player-style link that opens in a new tab.
+
+- [#351](https://github.com/LightNetDev/LightNet/pull/351) [`a1f63bf`](https://github.com/LightNetDev/LightNet/commit/a1f63bfa30448fdf58bfb1ff24007caa750349e0) Thanks [@smn-cds](https://github.com/smn-cds)! - Add a fallback in the video player so any video URL can be used on the "video" details page. Unsupported providers now render a poster-style link that opens the video on the external site.
+
+## 3.11.0
+
+### Minor Changes
+
+- [#347](https://github.com/LightNetDev/LightNet/pull/347) [`17ea3d9`](https://github.com/LightNetDev/LightNet/commit/17ea3d9b599d9456b36e1974d3a8f5dc7d39fb65) Thanks [@ajjn](https://github.com/ajjn)! - Add translation for Urdu
+
+### Patch Changes
+
+- [#344](https://github.com/LightNetDev/LightNet/pull/344) [`a48d2a7`](https://github.com/LightNetDev/LightNet/commit/a48d2a7ec9b782c763950b02cdbe420b1ed000ec) Thanks [@smn-cds](https://github.com/smn-cds)! - Remove preload React logic
+
 ## 3.10.8
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -139,7 +139,7 @@ test.describe("Media item edit page", () => {
   }
 
   const getPublishButton = (page: Page) =>
-    page.getByRole("button", { name: "Publish Changes" }).first()
+    page.getByRole("button", { name: "Publish changes" }).first()
 
   const expectPublishedMessage = (page: Page) =>
     expect(
@@ -347,4 +347,38 @@ test.describe("Media item edit page", () => {
       "true",
     )
   })
+
+  test("should not submit the form on enter", async ({ page, lightnet }) => {
+    await lightnet("/admin/media/faithful-freestyle--en")
+    const writeFileRequest = await recordWriteFile(page)
+    const writePromise = writeFileRequest()
+
+    const updatedTitle = "Faithful Freestyle (Enter key)"
+    const titleInput = page.getByLabel("Title")
+    await titleInput.fill(updatedTitle)
+
+    const publishButton = getPublishButton(page)
+    await expect(publishButton).toBeEnabled()
+
+    await titleInput.press("Enter")
+
+    const enterResult = await Promise.race([
+      writePromise.then(() => "submitted"),
+      page.waitForTimeout(500).then(() => "timeout"),
+    ])
+    expect(enterResult).toBe("timeout")
+    await expect(publishButton).toBeEnabled()
+
+    await publishButton.click()
+
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    const { body } = await writePromise
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      title: updatedTitle,
+    })
+    await expectPublishedMessage(page)
+  })
 })

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.1_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/node_modules/.bin/tailwind

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"

package/__e2e__/fixtures/basics/node_modules/.bin/tailwindcss

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -7,12 +7,12 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.16.1",
-    "lightnet": "^3.10.7",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "astro": "^5.16.6",
+    "lightnet": "^3.12.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "sharp": "^0.34.5",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3"
   },
   "engines": {

package/__tests__/pages/details-page/create-content-metadata.spec.ts

@@ -102,9 +102,29 @@ test("Should create complete content metadata", () => {
       type: "package",
     },
   },
-].forEach(({ url, expected }) => {
-  test(`Should create content metadata for url ${url}`, () => {
-    expect(createContentMetadata({ url })).toMatchObject(expected)
+  {
+    url: "/some.zip",
+    label: "foo",
+    expected: {
+      label: "foo",
+      isExternal: false,
+      extension: "zip",
+      type: "package",
+    },
+  },
+  {
+    url: "/some.zip",
+    label: "",
+    expected: {
+      label: "some",
+      isExternal: false,
+      extension: "zip",
+      type: "package",
+    },
+  },
+].forEach(({ url, expected, label }) => {
+  test(`Should create content metadata for url '${url}' ${label !== undefined ? `and label '${label}'` : ""}`, () => {
+    expect(createContentMetadata({ url, label })).toMatchObject(expected)
   })
 })
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.8",
+  "version": "3.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -50,24 +50,24 @@
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
-    "@mdxeditor/editor": "^3.50.0",
+    "@mdxeditor/editor": "^3.52.3",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-virtual": "^3.13.17",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.6.3",
+    "i18next": "^25.7.3",
     "marked": "^16.4.2",
-    "react-hook-form": "^7.66.1",
-    "yaml": "^2.8.1"
+    "react-hook-form": "^7.70.0",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.57.0",
-    "@types/node": "^22.19.1",
+    "@types/node": "^22.19.3",
     "@types/react": "^19.2.7",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.14"
+    "vitest": "^4.0.16"
   },
   "engines": {
     "node": ">=22"

package/src/admin/components/form/DynamicArray.tsx

@@ -12,66 +12,118 @@ import { useI18n } from "../../../i18n/react/use-i18n"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
+import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 export default function DynamicArray<TFieldValues extends FieldValues>({
   control,
   name,
   label,
+  required = false,
   hint,
   renderElement,
-  addButton,
+  renderElementMeta,
+  renderAddButton,
 }: {
   name: ArrayPath<TFieldValues>
+  required?: boolean
   label: string
   hint?: string
   control: Control<TFieldValues>
   renderElement: (index: number) => ReactNode
-  addButton: {
-    label: string
-    onClick: (
-      append: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>,
-      elementIndex: number,
-    ) => void
-  }
+  renderElementMeta?: (index: number) => ReactNode
+  renderAddButton: (args: {
+    addElement: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>
+    index: number
+  }) => ReactNode
 }) {
-  const { fields, append, remove } = useFieldArray({
+  const { fields, append, remove, swap } = useFieldArray({
     name,
     control,
   })
-  const { t } = useI18n()
   const errorMessage = useFieldError({ control, name })
+  const isDirty = useFieldDirty({ control, name })
   return (
     <fieldset key={name}>
       <legend>
-        <Label label={label} />
+        <Label
+          required={required}
+          label={label}
+          isDirty={isDirty}
+          isInvalid={!!errorMessage}
+        />
       </legend>
 
-      <div className="flex w-full flex-col divide-y divide-gray-300 rounded-lg rounded-ss-none border border-gray-300 bg-gray-100 shadow-sm">
+      <div
+        className={`flex w-full flex-col gap-1 rounded-xl rounded-ss-none ${getBorderClass({ isDirty, errorMessage })} bg-slate-200 p-1 shadow-inner`}
+      >
         {fields.map((field, index) => (
-          <div className="flex w-full items-center gap-2 p-2" key={field.id}>
-            <div className="flex grow flex-col">{renderElement(index)}</div>
-            <button
-              className="flex items-center rounded-md p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700"
-              type="button"
-              onClick={() => remove(index)}
+          <div
+            className="w-full gap-2 rounded-xl bg-slate-50 px-2 pb-4 shadow-sm"
+            key={field.id}
+          >
+            <div
+              className={`flex items-center ${renderElementMeta ? "justify-between" : "justify-end"}`}
             >
-              <Icon className="mdi--remove" ariaLabel={t("ln.admin.remove")} />
-            </button>
+              {renderElementMeta && renderElementMeta(index)}
+              <div className="-me-2 flex">
+                <ItemActionButton
+                  icon="mdi--arrow-up"
+                  label="ln.admin.move-up"
+                  disabled={index === 0}
+                  onClick={() => swap(index, index - 1)}
+                />
+                <ItemActionButton
+                  icon="mdi--arrow-down"
+                  label="ln.admin.move-down"
+                  disabled={index === fields.length - 1}
+                  onClick={() => swap(index, index + 1)}
+                />
+                <ItemActionButton
+                  icon="mdi--remove"
+                  label="ln.admin.remove"
+                  onClick={() => remove(index)}
+                  className="hover:!text-rose-800"
+                />
+              </div>
+            </div>
+
+            {renderElement(index)}
           </div>
         ))}
-        <button
-          type="button"
-          className="rounded-b-lg p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-sky-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700"
-          onClick={() => {
-            addButton.onClick(append, fields.length)
-          }}
-        >
-          {t(addButton.label)}
-        </button>
+        <div className="flex flex-col items-center py-2">
+          {renderAddButton({ addElement: append, index: fields.length })}
+        </div>
       </div>
       <ErrorMessage message={errorMessage} />
       <Hint preserveSpace={true} label={hint} />
     </fieldset>
   )
 }
+
+function ItemActionButton({
+  label,
+  icon,
+  onClick,
+  disabled = false,
+  className,
+}: {
+  label: string
+  icon: string
+  disabled?: boolean
+  onClick: () => void
+  className?: string
+}) {
+  const { t } = useI18n()
+  return (
+    <button
+      className={`flex items-center rounded-xl p-2 text-slate-600 transition-colors ease-in-out hover:text-sky-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700 disabled:text-slate-300 ${className}`}
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon className={icon} ariaLabel={t(label)} />
+    </button>
+  )
+}

package/src/admin/components/form/Input.tsx

@@ -1,19 +1,27 @@
 import type { InputHTMLAttributes } from "react"
-import { type Control, type FieldValues, type Path } from "react-hook-form"
+import {
+  type Control,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from "react-hook-form"
 
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
 import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 type Props<TFieldValues extends FieldValues> = {
   name: Path<TFieldValues>
+  required?: boolean
   label?: string
   labelSize?: "small" | "medium"
   hint?: string
   preserveHintSpace?: boolean
   control: Control<TFieldValues>
+  registerOptions?: RegisterOptions<TFieldValues>
 } & InputHTMLAttributes<HTMLInputElement>
 
 export default function Input<TFieldValues extends FieldValues>({
@@ -23,10 +31,14 @@ export default function Input<TFieldValues extends FieldValues>({
   hint,
   preserveHintSpace = true,
   control,
+  className,
+  required = false,
+  registerOptions,
   ...inputProps
 }: Props<TFieldValues>) {
   const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
+
   return (
     <div key={name} className="group flex w-full flex-col">
       {label && (
@@ -36,15 +48,17 @@ export default function Input<TFieldValues extends FieldValues>({
             size={labelSize}
             isDirty={isDirty}
             isInvalid={!!errorMessage}
+            required={required}
           />
         </label>
       )}
 
       <input
-        className={`dy-input dy-input-bordered border-gray-300 shadow-inner focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
+        className={`rounded-xl ${getBorderClass({ isDirty, errorMessage })} px-4 py-3 shadow-inner disabled:text-slate-500 ${label ? "rounded-ss-none" : ""} ${className}`}
         id={name}
         aria-invalid={!!errorMessage}
-        {...control.register(name)}
+        aria-required={required}
+        {...control.register(name, registerOptions)}
         {...inputProps}
       />
       <ErrorMessage message={errorMessage} />

package/src/admin/components/form/LazyLoadedMarkdownEditor.tsx

@@ -6,6 +6,8 @@ import {
   type CodeBlockEditorProps,
   codeBlockPlugin,
   CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
   headingsPlugin,
   linkDialogPlugin,
   linkPlugin,
@@ -22,6 +24,7 @@ import {
   type Control,
   Controller,
   type FieldValues,
+  get,
   type Path,
 } from "react-hook-form"
 
@@ -42,12 +45,15 @@ export default function LazyLoadedMarkdownEditor<
     <Controller
       control={control}
       name={name}
-      render={({ field: { onBlur, onChange, value, ref } }) => (
+      render={({
+        field: { onBlur, onChange, value, ref },
+        formState: { defaultValues },
+      }) => (
         <MDXEditor
           markdown={value ?? ""}
           onBlur={onBlur}
           onChange={onChange}
-          contentEditableClassName="prose bg-gray-50 h-80 w-full max-w-full overflow-y-auto"
+          contentEditableClassName="prose bg-slate-50 h-80 w-full max-w-full overflow-y-auto"
           ref={ref}
           onError={(error) =>
             console.error("Error while editing markdown", error)
@@ -68,17 +74,18 @@ export default function LazyLoadedMarkdownEditor<
             linkDialogPlugin(),
             quotePlugin(),
             markdownShortcutPlugin(),
+            diffSourcePlugin({ diffMarkdown: get(defaultValues, name) }),
             toolbarPlugin({
               toolbarContents: () => (
-                <>
+                <DiffSourceToggleWrapper>
                   <UndoRedo />
                   <BoldItalicUnderlineToggles />
                   <BlockTypeSelect />
                   <ListsToggle options={["bullet", "number"]} />
                   <CreateLink />
-                </>
+                </DiffSourceToggleWrapper>
               ),
-              toolbarClassName: "!rounded-none",
+              toolbarClassName: "!rounded-none !bg-slate-200",
             }),
           ]}
         />

package/src/admin/components/form/MarkdownEditor.tsx

@@ -6,6 +6,7 @@ import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
 import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 const LazyLoadedMarkdownEditor = lazy(
   () => import("./LazyLoadedMarkdownEditor"),
@@ -14,11 +15,13 @@ const LazyLoadedMarkdownEditor = lazy(
 export default function MarkdownEditor<TFieldValues extends FieldValues>({
   control,
   name,
+  required = false,
   label,
   hint,
 }: {
   name: Path<TFieldValues>
   label: string
+  required?: boolean
   hint?: string
   control: Control<TFieldValues>
 }) {
@@ -28,16 +31,21 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
   return (
     <fieldset key={name} className="group">
       <legend>
-        <Label label={label} isDirty={isDirty} isInvalid={!!errorMessage} />
+        <Label
+          required={required}
+          label={label}
+          isDirty={isDirty}
+          isInvalid={!!errorMessage}
+        />
       </legend>
 
       <div
-        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-sky-700 group-focus-within:ring-1 group-focus-within:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""}`}
+        className={`overflow-hidden rounded-xl rounded-ss-none ${getBorderClass({ isDirty, errorMessage, focusWithin: true })} shadow-sm`}
       >
         <Suspense
           fallback={
-            <div className="h-[22.75rem] w-full bg-gray-50">
-              <div className="h-10 bg-gray-100"></div>
+            <div className="h-[22.75rem] w-full bg-slate-50">
+              <div className="h-10 bg-slate-100"></div>
             </div>
           }
         >

package/src/admin/components/form/Select.tsx

@@ -1,15 +1,18 @@
 import { type Control, type FieldValues, type Path } from "react-hook-form"
 
+import Icon from "../../../components/Icon"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
 import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
   labelSize,
+  required = false,
   control,
   defaultValue,
   hint,
@@ -20,6 +23,7 @@ export default function Select<TFieldValues extends FieldValues>({
   label?: string
   labelSize?: "small" | "medium"
   hint?: string
+  required?: boolean
   preserveHintSpace?: boolean
   defaultValue?: string
   control: Control<TFieldValues>
@@ -35,23 +39,31 @@ export default function Select<TFieldValues extends FieldValues>({
             label={label}
             size={labelSize}
             isDirty={isDirty}
+            required={required}
             isInvalid={!!errorMessage}
           />
         </label>
       )}
-      <select
-        {...control.register(name)}
-        id={name}
-        aria-invalid={!!errorMessage}
-        defaultValue={defaultValue}
-        className={`dy-select dy-select-bordered text-base shadow-sm focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
-      >
-        {options.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText ?? id}
-          </option>
-        ))}
-      </select>
+      <div className="relative">
+        <select
+          {...control.register(name)}
+          id={name}
+          aria-invalid={!!errorMessage}
+          aria-required={required}
+          defaultValue={defaultValue}
+          className={`w-full appearance-none rounded-xl ${getBorderClass({ isDirty, errorMessage })} bg-white px-4 py-3 pe-12 shadow-sm ${label ? "rounded-ss-none" : ""}`}
+        >
+          {options.map(({ id, labelText }) => (
+            <option key={id} value={id}>
+              {labelText ?? id}
+            </option>
+          ))}
+        </select>
+        <Icon
+          className="absolute end-3 top-1/2 -translate-y-1/2 text-lg text-slate-600 mdi--chevron-down"
+          ariaLabel=""
+        />
+      </div>
       <ErrorMessage message={errorMessage} />
       <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>

package/src/admin/components/form/SubmitButton.tsx

@@ -8,10 +8,10 @@ import type { MediaItem } from "../../types/media-item"
 const SUCCESS_DURATION_MS = 2000
 
 const baseButtonClass =
-  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-sky-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
+  "flex min-w-52 items-center justify-center gap-2 rounded-xl px-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-sky-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
 
 const buttonStateClasses = {
-  idle: "bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-500 disabled:text-gray-300",
+  idle: "bg-slate-800 text-slate-50 hover:bg-slate-950 hover:text-slate-300 disabled:bg-slate-500 disabled:text-slate-300",
   error:
     "bg-rose-700 text-white hover:bg-rose-800 hover:text-white disabled:bg-rose-600",
   success:

package/src/admin/components/form/atoms/Button.tsx

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react"
+
+type Props = {
+  variant: "secondary"
+  children?: ReactNode
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export default function Button({
+  children,
+  className,
+  variant,
+  ...buttonProps
+}: Props) {
+  const styles = {
+    secondary: "text-slate-800 bg-slate-50 hover:bg-sky-50",
+  } as const
+
+  return (
+    <button
+      className={`flex items-center gap-1 rounded-xl px-10 py-4 text-sm font-bold shadow-sm transition-colors ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700 ${styles[variant]} ${className}`}
+      type="button"
+      {...buttonProps}
+    >
+      {children}
+    </button>
+  )
+}