@jhb.software/payload-alt-text-plugin 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,27 @@
 # Image Alt Text Generation Plugin for Payload CMS
 
-A minimal plugin to generate image alt texts using OpenAI's Vision API. This plugin automatically adds an alt text field with a button to generate the alt text to upload collections, and includes a bulk generation feature in the list view for processing multiple images at once.
+A [Payload CMS](https://payloadcms.com/) plugin that adds AI-powered alt text generation for images. I automatically adds an alt text field with a button to generate the alt text to specified upload collections, and includes a bulk generation feature in the list view for processing multiple images at once.
+
+## Features
+
+- Generate alt text for images using AI in the Payload Admin UI
+- Supports any AI provider using a resolver pattern (e.g., OpenAI, Anthropic, etc.)
+- Comes with a ready-to-use OpenAI resolver out of the box
+- Automatic keyword extraction for improved admin search
+- Bulk generation for processing multiple images at once
+- Full localization support
+
+
+When the plugin is enabled for an upload collection, it will:
+
+1. Add an alt text field to the collection
+   - A button to AI-generate the alt text
+   - This field will include a description of what the alt text should be
+2. Add a keywords fields to the collection
+   - This field will be automatically filled when generating the alt text 
+   - It will be used for improving the search of images in the admin panel
+2. Add a bulk generate button to the collection list view
+   - This button will allow you to generate alt text for multiple images at once
 
 ## Installation
 
@@ -10,21 +31,23 @@ pnpm add @jhb.software/payload-alt-text-plugin
 
 ## Setup
 
-### 1. Add plugin to Payload config
+Install the plugin and add it to your Payload config:
 
-```typescript
-import { payloadAltTextPlugin } from '@jhb.software/payload-alt-text-plugin'
+```ts
+import {
+  payloadAltTextPlugin,
+  openAIResolver,
+} from '@jhb.software/payload-alt-text-plugin'
 
 export default buildConfig({
   plugins: [
     payloadAltTextPlugin({
-      collections: ['media'], // Specify which upload collections to enable the plugin for
-      openAIApiKey: process.env.OPENAI_API_KEY!,
-      model: 'gpt-4.1-mini',
-      getImageThumbnail: (doc: Record<string, unknown>) => {
-        // a function to get a thumbnail URL (e.g. from the sizes)
-        return doc.url as string
-      },
+      collections: ['media'],
+      resolver: openAIResolver({
+        apiKey: process.env.OPENAI_API_KEY,
+        model: 'gpt-4.1-mini', // optional, defaults to 'gpt-4.1-nano'
+      }),
+      getImageThumbnail: (doc) => doc.url, // a function to get a thumbnail URL (e.g. from the sizes)
     }),
   ],
 })
@@ -32,22 +55,70 @@ export default buildConfig({
 
 Note: When localization is disabled in your Payload config (default), you need to specify the locale to generate the alt texts in via the `locale` plugin option.
 
-## Features
+## Configuration
 
-When the plugin is enabled for an upload collection, it will
+### Plugin Options
 
-1. Add an alt text field to the collection
-   - A button to AI-generate the alt text
-   - This field will include a description of what the alt text should be
-2. Add a keywords fields to the collection
-   - This field will be automatically filled when generating the alt text 
-   - It will be used for improving the search of images in the admin panel
-2. Add a bulk generate button to the collection list view
-   - This button will allow you to generate alt text for multiple images at once
+| Option                       | Type               | Required | Description                                                              |
+| ---------------------------- | ------------------ | -------- | ------------------------------------------------------------------------ |
+| `collections`                | `CollectionSlug[]` | Yes      | Collections to enable alt text generation for                            |
+| `resolver`                   | `AltTextResolver`  | Yes      | Alt text resolver to use (e.g., `openAIResolver`)                        |
+| `getImageThumbnail`          | `Function`         | Yes      | Function to get the thumbnail URL from an image document                 |
+| `enabled`                    | `boolean`          | No       | Whether to enable the plugin                                             |
+| `locale`                     | `string`           | No       | Locale for alt text generation (required when localization is disabled)  |
+| `maxBulkGenerateConcurrency` | `number`           | No       | Maximum concurrent API requests for bulk operations (default: 16)        |
+| `fieldsOverride`             | `Function`         | No       | Override the default fields inserted by the plugin                       |
+
+### Resolvers
+
+This plugin is designed to work seamlessly with various AI providers by accepting a customizable resolver as a configuration option.
+
+An OpenAI resolver is provided out of the box, but you can use any AI provider by creating your own resolver and specifying it in the plugin configuration.
+
+#### OpenAI Resolver
+
+```ts
+import { openAIResolver } from '@jhb.software/payload-alt-text-plugin'
+
+openAIResolver({
+  apiKey: process.env.OPENAI_API_KEY,
+  model: 'gpt-4.1-mini', // or 'gpt-4.1-nano' (default)
+})
+```
+
+## Custom Resolver
+
+You can create your own resolver by implementing the `AltTextResolver` interface.
+
+```ts
+import type { AltTextResolver } from '@jhb.software/payload-alt-text-plugin'
+
+export const customResolver = (): AltTextResolver => ({
+  key: 'custom',
+  resolve: async ({ imageThumbnailUrl, filename, locale, req }) => {
+    // Your custom alt text generation logic here
+    const altText = await generateAltText(imageThumbnailUrl, filename, locale, req)
+
+    return {
+      success: true,
+      result: altText,
+    }
+  },
+  resolveBulk: async ({ imageThumbnailUrl, filename, locales, req }) => {
+     // Your custom alt text generation logic here
+    const altTexts = await generateAltTextBulk(imageThumbnailUrl, filename, locales, req)
+
+    return { 
+      success: true, 
+      results: altTexts 
+    }
+  },
+})
+```
 
 ## Roadmap
 
-> ⚠️ **Warning**: This plugin is actively evolving and may undergo significant changes. While it is functional, please thoroughly test before using in production environments.
+> **Warning**: This plugin is actively evolving and may undergo significant changes. While it is functional, please thoroughly test before using in production environments.
 
 Have a suggestion for the plugin? Any feedback is welcome!
 

package/dist/components/AltTextField.js

@@ -4,7 +4,7 @@ import { FieldLabel, TextareaInput, useDocumentInfo, useField } from '@payloadcm
 import { GenerateAltTextButton } from './GenerateAltTextButton.js';
 export const AltTextField = (clientProps)=>{
     const { field, path } = clientProps;
-    const { value, setValue } = useField({
+    const { setValue, value } = useField({
         path
     });
     const { id } = useDocumentInfo();
@@ -20,17 +20,17 @@ export const AltTextField = (clientProps)=>{
             /*#__PURE__*/ _jsx(FieldLabel, {
                 htmlFor: `field-${path}`,
                 label: field.label,
-                required: required,
-                localized: field.localized
+                localized: field.localized,
+                required: required
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "field-type__wrap",
                 children: /*#__PURE__*/ _jsx(TextareaInput, {
-                    value: value,
+                    AfterInput: /*#__PURE__*/ _jsx(GenerateAltTextButton, {}),
+                    onChange: (e)=>setValue(e.target.value),
                     path: path,
                     required: required,
-                    onChange: (e)=>setValue(e.target.value),
-                    AfterInput: /*#__PURE__*/ _jsx(GenerateAltTextButton, {})
+                    value: value
                 })
             })
         ]

package/dist/components/AltTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/AltTextField.tsx"],"sourcesContent":["'use client'\n\nimport { FieldLabel, TextareaInput, useDocumentInfo, useField } from '@payloadcms/ui'\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport { GenerateAltTextButton } from './GenerateAltTextButton.js'\n\nexport const AltTextField = (clientProps: TextareaFieldClientProps) => {\n  const { field, path } = clientProps\n\n  const { value, setValue } = useField<string>({ path })\n  const { id } = useDocumentInfo()\n\n  // the field should be optional when the document is created\n  // (since the alt text generation can only be used once the document is created and the image uploaded)\n  const required = id ? field.required : false\n\n  return (\n    <div className=\"field-type textarea\" style={{ flex: '1 1 auto' }}>\n      <FieldLabel\n        htmlFor={`field-${path}`}\n        label={field.label}\n        required={required}\n        localized={field.localized}\n      />\n\n      <div className=\"field-type__wrap\">\n        <TextareaInput\n          value={value}\n          path={path!}\n          required={required}\n          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n          AfterInput={<GenerateAltTextButton />}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useDocumentInfo","useField","GenerateAltTextButton","AltTextField","clientProps","field","path","value","setValue","id","required","div","className","style","flex","htmlFor","label","localized","onChange","e","target","AfterInput"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,aAAa,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAGrF,SAASC,qBAAqB,QAAQ,6BAA4B;AAElE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGF;IAExB,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGP,SAAiB;QAAEK;IAAK;IACpD,MAAM,EAAEG,EAAE,EAAE,GAAGT;IAEf,4DAA4D;IAC5D,uGAAuG;IACvG,MAAMU,WAAWD,KAAKJ,MAAMK,QAAQ,GAAG;IAEvC,qBACE,MAACC;QAAIC,WAAU;QAAsBC,OAAO;YAAEC,MAAM;QAAW;;0BAC7D,KAAChB;gBACCiB,SAAS,CAAC,MAAM,EAAET,MAAM;gBACxBU,OAAOX,MAAMW,KAAK;gBAClBN,UAAUA;gBACVO,WAAWZ,MAAMY,SAAS;;0BAG5B,KAACN;gBAAIC,WAAU;0BACb,cAAA,KAACb;oBACCQ,OAAOA;oBACPD,MAAMA;oBACNI,UAAUA;oBACVQ,UAAU,CAACC,IAA8CX,SAASW,EAAEC,MAAM,CAACb,KAAK;oBAChFc,0BAAY,KAACnB;;;;;AAKvB,EAAC"}
+{"version":3,"sources":["../../src/components/AltTextField.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport { FieldLabel, TextareaInput, useDocumentInfo, useField } from '@payloadcms/ui'\n\nimport { GenerateAltTextButton } from './GenerateAltTextButton.js'\n\nexport const AltTextField = (clientProps: TextareaFieldClientProps) => {\n  const { field, path } = clientProps\n\n  const { setValue, value } = useField<string>({ path })\n  const { id } = useDocumentInfo()\n\n  // the field should be optional when the document is created\n  // (since the alt text generation can only be used once the document is created and the image uploaded)\n  const required = id ? field.required : false\n\n  return (\n    <div className=\"field-type textarea\" style={{ flex: '1 1 auto' }}>\n      <FieldLabel\n        htmlFor={`field-${path}`}\n        label={field.label}\n        localized={field.localized}\n        required={required}\n      />\n\n      <div className=\"field-type__wrap\">\n        <TextareaInput\n          AfterInput={<GenerateAltTextButton />}\n          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n          path={path}\n          required={required}\n          value={value}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useDocumentInfo","useField","GenerateAltTextButton","AltTextField","clientProps","field","path","setValue","value","id","required","div","className","style","flex","htmlFor","label","localized","AfterInput","onChange","e","target"],"mappings":"AAAA;;AAIA,SAASA,UAAU,EAAEC,aAAa,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAErF,SAASC,qBAAqB,QAAQ,6BAA4B;AAElE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGF;IAExB,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGP,SAAiB;QAAEK;IAAK;IACpD,MAAM,EAAEG,EAAE,EAAE,GAAGT;IAEf,4DAA4D;IAC5D,uGAAuG;IACvG,MAAMU,WAAWD,KAAKJ,MAAMK,QAAQ,GAAG;IAEvC,qBACE,MAACC;QAAIC,WAAU;QAAsBC,OAAO;YAAEC,MAAM;QAAW;;0BAC7D,KAAChB;gBACCiB,SAAS,CAAC,MAAM,EAAET,MAAM;gBACxBU,OAAOX,MAAMW,KAAK;gBAClBC,WAAWZ,MAAMY,SAAS;gBAC1BP,UAAUA;;0BAGZ,KAACC;gBAAIC,WAAU;0BACb,cAAA,KAACb;oBACCmB,0BAAY,KAAChB;oBACbiB,UAAU,CAACC,IAA8Cb,SAASa,EAAEC,MAAM,CAACb,KAAK;oBAChFF,MAAMA;oBACNI,UAAUA;oBACVF,OAAOA;;;;;AAKjB,EAAC"}

package/dist/components/BulkGenerateAltTextsButton.js

@@ -3,27 +3,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, toast, useSelection } from '@payloadcms/ui';
 import { useRouter } from 'next/navigation.js';
 import { useTransition } from 'react';
+import { usePluginTranslation } from '../utils/usePluginTranslation.js';
 import { Lightning } from './icons/Lightning.js';
 import { Spinner } from './icons/Spinner.js';
-import { usePluginTranslation } from '../utils/usePluginTranslation.js';
 export function BulkGenerateAltTextsButton({ collectionSlug }) {
     const { t } = usePluginTranslation();
     const [isPending, startTransition] = useTransition();
     const { selected, setSelection } = useSelection();
     const selectedIds = Array.from(selected.entries()).filter(([, isSelected])=>isSelected).map(([id])=>id);
     const router = useRouter();
-    const handleGenerateAltTexts = async ()=>{
+    const handleGenerateAltTexts = ()=>{
         startTransition(async ()=>{
             if (!collectionSlug) {
                 throw new Error('Collection slug is required');
             }
             try {
                 const response = await fetch('/api/alt-text-plugin/bulk-generate-alt-texts', {
-                    method: 'POST',
                     body: JSON.stringify({
                         collection: collectionSlug,
                         ids: selectedIds
-                    })
+                    }),
+                    method: 'POST'
                 });
                 if (!response.ok) {
                     toast.error(t('failedToGenerate'));
@@ -51,16 +51,16 @@ export function BulkGenerateAltTextsButton({ collectionSlug }) {
         });
     };
     return selectedIds.length > 0 && /*#__PURE__*/ _jsx("div", {
+        className: "m-0",
         style: {
             display: 'flex',
             justifyContent: 'right'
         },
-        className: "m-0",
         children: /*#__PURE__*/ _jsxs(Button, {
-            onClick: handleGenerateAltTexts,
+            className: "m-0",
             disabled: isPending || selectedIds.length === 0,
             icon: isPending ? /*#__PURE__*/ _jsx(Spinner, {}) : /*#__PURE__*/ _jsx(Lightning, {}),
-            className: "m-0",
+            onClick: handleGenerateAltTexts,
             children: [
                 t('generateAltTextFor'),
                 " ",

package/dist/components/BulkGenerateAltTextsButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/BulkGenerateAltTextsButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useSelection } from '@payloadcms/ui'\nimport { useRouter } from 'next/navigation.js'\nimport { useTransition } from 'react'\n\nimport { Lightning } from './icons/Lightning.js'\nimport { Spinner } from './icons/Spinner.js'\nimport { usePluginTranslation } from '../utils/usePluginTranslation.js'\n\nexport function BulkGenerateAltTextsButton({ collectionSlug }: { collectionSlug: string }) {\n  const { t } = usePluginTranslation()\n  const [isPending, startTransition] = useTransition()\n  const { selected, setSelection } = useSelection()\n\n  const selectedIds = Array.from(selected.entries())\n    .filter(([, isSelected]) => isSelected)\n    .map(([id]) => id) as string[]\n\n  const router = useRouter()\n\n  const handleGenerateAltTexts = async () => {\n    startTransition(async () => {\n      if (!collectionSlug) {\n        throw new Error('Collection slug is required')\n      }\n\n      try {\n        const response = await fetch('/api/alt-text-plugin/bulk-generate-alt-texts', {\n          method: 'POST',\n          body: JSON.stringify({\n            collection: collectionSlug,\n            ids: selectedIds,\n          }),\n        })\n\n        if (!response.ok) {\n          toast.error(t('failedToGenerate'))\n          return\n        }\n\n        const data = (await response.json()) as {\n          updatedDocs: number\n          totalDocs: number\n          erroredDocs: string[]\n        }\n\n        if (data.erroredDocs.length > 0) {\n          toast.error(\n            t('failedToGenerateForXImages').replace('{X}', data.erroredDocs.length.toString()),\n          )\n        }\n\n        // in case not all images were updated, show a warning instead of a success message:\n        if (data.updatedDocs === data.totalDocs) {\n          toast.success(\n            t('xOfYImagesUpdated')\n              .replace('{X}', data.updatedDocs.toString())\n              .replace('{Y}', data.totalDocs.toString()),\n          )\n        } else {\n          toast.warning(\n            t('xOfYImagesUpdated')\n              .replace('{X}', data.updatedDocs.toString())\n              .replace('{Y}', data.totalDocs.toString()),\n          )\n        }\n\n        // deselect all previously selected images\n        for (const id of selectedIds) {\n          setSelection(id)\n        }\n\n        router.refresh()\n      } catch (error) {\n        console.error('Error generating alt text:', error)\n        toast.error(t('errorGeneratingAltText'))\n      }\n    })\n  }\n\n  return (\n    selectedIds.length > 0 && (\n      <div style={{ display: 'flex', justifyContent: 'right' }} className=\"m-0\">\n        <Button\n          onClick={handleGenerateAltTexts}\n          disabled={isPending || selectedIds.length === 0}\n          icon={isPending ? <Spinner /> : <Lightning />}\n          className=\"m-0\"\n        >\n          {t('generateAltTextFor')} {selectedIds.length}{' '}\n          {selectedIds.length === 1 ? t('image') : t('images')}\n        </Button>\n      </div>\n    )\n  )\n}\n"],"names":["Button","toast","useSelection","useRouter","useTransition","Lightning","Spinner","usePluginTranslation","BulkGenerateAltTextsButton","collectionSlug","t","isPending","startTransition","selected","setSelection","selectedIds","Array","from","entries","filter","isSelected","map","id","router","handleGenerateAltTexts","Error","response","fetch","method","body","JSON","stringify","collection","ids","ok","error","data","json","erroredDocs","length","replace","toString","updatedDocs","totalDocs","success","warning","refresh","console","div","style","display","justifyContent","className","onClick","disabled","icon"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,YAAY,QAAQ,iBAAgB;AAC5D,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,SAASC,aAAa,QAAQ,QAAO;AAErC,SAASC,SAAS,QAAQ,uBAAsB;AAChD,SAASC,OAAO,QAAQ,qBAAoB;AAC5C,SAASC,oBAAoB,QAAQ,mCAAkC;AAEvE,OAAO,SAASC,2BAA2B,EAAEC,cAAc,EAA8B;IACvF,MAAM,EAAEC,CAAC,EAAE,GAAGH;IACd,MAAM,CAACI,WAAWC,gBAAgB,GAAGR;IACrC,MAAM,EAAES,QAAQ,EAAEC,YAAY,EAAE,GAAGZ;IAEnC,MAAMa,cAAcC,MAAMC,IAAI,CAACJ,SAASK,OAAO,IAC5CC,MAAM,CAAC,CAAC,GAAGC,WAAW,GAAKA,YAC3BC,GAAG,CAAC,CAAC,CAACC,GAAG,GAAKA;IAEjB,MAAMC,SAASpB;IAEf,MAAMqB,yBAAyB;QAC7BZ,gBAAgB;YACd,IAAI,CAACH,gBAAgB;gBACnB,MAAM,IAAIgB,MAAM;YAClB;YAEA,IAAI;gBACF,MAAMC,WAAW,MAAMC,MAAM,gDAAgD;oBAC3EC,QAAQ;oBACRC,MAAMC,KAAKC,SAAS,CAAC;wBACnBC,YAAYvB;wBACZwB,KAAKlB;oBACP;gBACF;gBAEA,IAAI,CAACW,SAASQ,EAAE,EAAE;oBAChBjC,MAAMkC,KAAK,CAACzB,EAAE;oBACd;gBACF;gBAEA,MAAM0B,OAAQ,MAAMV,SAASW,IAAI;gBAMjC,IAAID,KAAKE,WAAW,CAACC,MAAM,GAAG,GAAG;oBAC/BtC,MAAMkC,KAAK,CACTzB,EAAE,8BAA8B8B,OAAO,CAAC,OAAOJ,KAAKE,WAAW,CAACC,MAAM,CAACE,QAAQ;gBAEnF;gBAEA,oFAAoF;gBACpF,IAAIL,KAAKM,WAAW,KAAKN,KAAKO,SAAS,EAAE;oBACvC1C,MAAM2C,OAAO,CACXlC,EAAE,qBACC8B,OAAO,CAAC,OAAOJ,KAAKM,WAAW,CAACD,QAAQ,IACxCD,OAAO,CAAC,OAAOJ,KAAKO,SAAS,CAACF,QAAQ;gBAE7C,OAAO;oBACLxC,MAAM4C,OAAO,CACXnC,EAAE,qBACC8B,OAAO,CAAC,OAAOJ,KAAKM,WAAW,CAACD,QAAQ,IACxCD,OAAO,CAAC,OAAOJ,KAAKO,SAAS,CAACF,QAAQ;gBAE7C;gBAEA,0CAA0C;gBAC1C,KAAK,MAAMnB,MAAMP,YAAa;oBAC5BD,aAAaQ;gBACf;gBAEAC,OAAOuB,OAAO;YAChB,EAAE,OAAOX,OAAO;gBACdY,QAAQZ,KAAK,CAAC,8BAA8BA;gBAC5ClC,MAAMkC,KAAK,CAACzB,EAAE;YAChB;QACF;IACF;IAEA,OACEK,YAAYwB,MAAM,GAAG,mBACnB,KAACS;QAAIC,OAAO;YAAEC,SAAS;YAAQC,gBAAgB;QAAQ;QAAGC,WAAU;kBAClE,cAAA,MAACpD;YACCqD,SAAS7B;YACT8B,UAAU3C,aAAaI,YAAYwB,MAAM,KAAK;YAC9CgB,MAAM5C,0BAAY,KAACL,6BAAa,KAACD;YACjC+C,WAAU;;gBAET1C,EAAE;gBAAsB;gBAAEK,YAAYwB,MAAM;gBAAE;gBAC9CxB,YAAYwB,MAAM,KAAK,IAAI7B,EAAE,WAAWA,EAAE;;;;AAKrD"}
+{"version":3,"sources":["../../src/components/BulkGenerateAltTextsButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useSelection } from '@payloadcms/ui'\nimport { useRouter } from 'next/navigation.js'\nimport { useTransition } from 'react'\n\nimport { usePluginTranslation } from '../utils/usePluginTranslation.js'\nimport { Lightning } from './icons/Lightning.js'\nimport { Spinner } from './icons/Spinner.js'\n\nexport function BulkGenerateAltTextsButton({ collectionSlug }: { collectionSlug: string }) {\n  const { t } = usePluginTranslation()\n  const [isPending, startTransition] = useTransition()\n  const { selected, setSelection } = useSelection()\n\n  const selectedIds = Array.from(selected.entries())\n    .filter(([, isSelected]) => isSelected)\n    .map(([id]) => id) as string[]\n\n  const router = useRouter()\n\n  const handleGenerateAltTexts = () => {\n    startTransition(async () => {\n      if (!collectionSlug) {\n        throw new Error('Collection slug is required')\n      }\n\n      try {\n        const response = await fetch('/api/alt-text-plugin/bulk-generate-alt-texts', {\n          body: JSON.stringify({\n            collection: collectionSlug,\n            ids: selectedIds,\n          }),\n          method: 'POST',\n        })\n\n        if (!response.ok) {\n          toast.error(t('failedToGenerate'))\n          return\n        }\n\n        const data = (await response.json()) as {\n          erroredDocs: string[]\n          totalDocs: number\n          updatedDocs: number\n        }\n\n        if (data.erroredDocs.length > 0) {\n          toast.error(\n            t('failedToGenerateForXImages').replace('{X}', data.erroredDocs.length.toString()),\n          )\n        }\n\n        // in case not all images were updated, show a warning instead of a success message:\n        if (data.updatedDocs === data.totalDocs) {\n          toast.success(\n            t('xOfYImagesUpdated')\n              .replace('{X}', data.updatedDocs.toString())\n              .replace('{Y}', data.totalDocs.toString()),\n          )\n        } else {\n          toast.warning(\n            t('xOfYImagesUpdated')\n              .replace('{X}', data.updatedDocs.toString())\n              .replace('{Y}', data.totalDocs.toString()),\n          )\n        }\n\n        // deselect all previously selected images\n        for (const id of selectedIds) {\n          setSelection(id)\n        }\n\n        router.refresh()\n      } catch (error) {\n        console.error('Error generating alt text:', error)\n        toast.error(t('errorGeneratingAltText'))\n      }\n    })\n  }\n\n  return (\n    selectedIds.length > 0 && (\n      <div className=\"m-0\" style={{ display: 'flex', justifyContent: 'right' }}>\n        <Button\n          className=\"m-0\"\n          disabled={isPending || selectedIds.length === 0}\n          icon={isPending ? <Spinner /> : <Lightning />}\n          onClick={handleGenerateAltTexts}\n        >\n          {t('generateAltTextFor')} {selectedIds.length}{' '}\n          {selectedIds.length === 1 ? t('image') : t('images')}\n        </Button>\n      </div>\n    )\n  )\n}\n"],"names":["Button","toast","useSelection","useRouter","useTransition","usePluginTranslation","Lightning","Spinner","BulkGenerateAltTextsButton","collectionSlug","t","isPending","startTransition","selected","setSelection","selectedIds","Array","from","entries","filter","isSelected","map","id","router","handleGenerateAltTexts","Error","response","fetch","body","JSON","stringify","collection","ids","method","ok","error","data","json","erroredDocs","length","replace","toString","updatedDocs","totalDocs","success","warning","refresh","console","div","className","style","display","justifyContent","disabled","icon","onClick"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,YAAY,QAAQ,iBAAgB;AAC5D,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,SAASC,aAAa,QAAQ,QAAO;AAErC,SAASC,oBAAoB,QAAQ,mCAAkC;AACvE,SAASC,SAAS,QAAQ,uBAAsB;AAChD,SAASC,OAAO,QAAQ,qBAAoB;AAE5C,OAAO,SAASC,2BAA2B,EAAEC,cAAc,EAA8B;IACvF,MAAM,EAAEC,CAAC,EAAE,GAAGL;IACd,MAAM,CAACM,WAAWC,gBAAgB,GAAGR;IACrC,MAAM,EAAES,QAAQ,EAAEC,YAAY,EAAE,GAAGZ;IAEnC,MAAMa,cAAcC,MAAMC,IAAI,CAACJ,SAASK,OAAO,IAC5CC,MAAM,CAAC,CAAC,GAAGC,WAAW,GAAKA,YAC3BC,GAAG,CAAC,CAAC,CAACC,GAAG,GAAKA;IAEjB,MAAMC,SAASpB;IAEf,MAAMqB,yBAAyB;QAC7BZ,gBAAgB;YACd,IAAI,CAACH,gBAAgB;gBACnB,MAAM,IAAIgB,MAAM;YAClB;YAEA,IAAI;gBACF,MAAMC,WAAW,MAAMC,MAAM,gDAAgD;oBAC3EC,MAAMC,KAAKC,SAAS,CAAC;wBACnBC,YAAYtB;wBACZuB,KAAKjB;oBACP;oBACAkB,QAAQ;gBACV;gBAEA,IAAI,CAACP,SAASQ,EAAE,EAAE;oBAChBjC,MAAMkC,KAAK,CAACzB,EAAE;oBACd;gBACF;gBAEA,MAAM0B,OAAQ,MAAMV,SAASW,IAAI;gBAMjC,IAAID,KAAKE,WAAW,CAACC,MAAM,GAAG,GAAG;oBAC/BtC,MAAMkC,KAAK,CACTzB,EAAE,8BAA8B8B,OAAO,CAAC,OAAOJ,KAAKE,WAAW,CAACC,MAAM,CAACE,QAAQ;gBAEnF;gBAEA,oFAAoF;gBACpF,IAAIL,KAAKM,WAAW,KAAKN,KAAKO,SAAS,EAAE;oBACvC1C,MAAM2C,OAAO,CACXlC,EAAE,qBACC8B,OAAO,CAAC,OAAOJ,KAAKM,WAAW,CAACD,QAAQ,IACxCD,OAAO,CAAC,OAAOJ,KAAKO,SAAS,CAACF,QAAQ;gBAE7C,OAAO;oBACLxC,MAAM4C,OAAO,CACXnC,EAAE,qBACC8B,OAAO,CAAC,OAAOJ,KAAKM,WAAW,CAACD,QAAQ,IACxCD,OAAO,CAAC,OAAOJ,KAAKO,SAAS,CAACF,QAAQ;gBAE7C;gBAEA,0CAA0C;gBAC1C,KAAK,MAAMnB,MAAMP,YAAa;oBAC5BD,aAAaQ;gBACf;gBAEAC,OAAOuB,OAAO;YAChB,EAAE,OAAOX,OAAO;gBACdY,QAAQZ,KAAK,CAAC,8BAA8BA;gBAC5ClC,MAAMkC,KAAK,CAACzB,EAAE;YAChB;QACF;IACF;IAEA,OACEK,YAAYwB,MAAM,GAAG,mBACnB,KAACS;QAAIC,WAAU;QAAMC,OAAO;YAAEC,SAAS;YAAQC,gBAAgB;QAAQ;kBACrE,cAAA,MAACpD;YACCiD,WAAU;YACVI,UAAU1C,aAAaI,YAAYwB,MAAM,KAAK;YAC9Ce,MAAM3C,0BAAY,KAACJ,6BAAa,KAACD;YACjCiD,SAAS/B;;gBAERd,EAAE;gBAAsB;gBAAEK,YAAYwB,MAAM;gBAAE;gBAC9CxB,YAAYwB,MAAM,KAAK,IAAI7B,EAAE,WAAWA,EAAE;;;;AAKrD"}

package/dist/components/GenerateAltTextButton.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, toast, useDocumentInfo, useField, useLocale } from '@payloadcms/ui';
 import { useTransition } from 'react';
+import { usePluginTranslation } from '../utils/usePluginTranslation.js';
 import { Lightning } from './icons/Lightning.js';
 import { Spinner } from './icons/Spinner.js';
-import { usePluginTranslation } from '../utils/usePluginTranslation.js';
 export function GenerateAltTextButton() {
     const { t } = usePluginTranslation();
     const { id, collectionSlug } = useDocumentInfo();
@@ -16,7 +16,7 @@ export function GenerateAltTextButton() {
     const { setValue: setAltText } = useField({
         path: 'alt'
     });
-    const handleGenerateAltText = async ()=>{
+    const handleGenerateAltText = ()=>{
         if (!collectionSlug || !id) {
             toast.error(t('cannotGenerateMissingFields'));
             throw new Error('Missing required fields');
@@ -24,12 +24,12 @@ export function GenerateAltTextButton() {
         startTransition(async ()=>{
             try {
                 const response = await fetch('/api/alt-text-plugin/generate-alt-text', {
-                    method: 'POST',
                     body: JSON.stringify({
-                        collection: collectionSlug,
                         id: id,
+                        collection: collectionSlug,
                         locale: locale?.code ?? null
-                    })
+                    }),
+                    method: 'POST'
                 });
                 if (!response.ok) {
                     let errorMessage = t('failedToGenerate');
@@ -65,8 +65,8 @@ export function GenerateAltTextButton() {
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 style: {
-                    flex: '1',
-                    color: 'var(--theme-elevation-400)'
+                    color: 'var(--theme-elevation-400)',
+                    flex: '1'
                 },
                 children: [
                     /*#__PURE__*/ _jsx("p", {
@@ -74,8 +74,8 @@ export function GenerateAltTextButton() {
                     }),
                     /*#__PURE__*/ _jsxs("ol", {
                         style: {
-                            paddingLeft: '20px',
-                            margin: '10px 0'
+                            margin: '10px 0',
+                            paddingLeft: '20px'
                         },
                         children: [
                             /*#__PURE__*/ _jsx("li", {
@@ -93,13 +93,13 @@ export function GenerateAltTextButton() {
             }),
             /*#__PURE__*/ _jsx("div", {
                 style: {
-                    display: 'flex',
-                    alignItems: 'center'
+                    alignItems: 'center',
+                    display: 'flex'
                 },
                 children: /*#__PURE__*/ _jsx(Button, {
-                    onClick: handleGenerateAltText,
                     disabled: isPending || !id,
                     icon: isPending ? /*#__PURE__*/ _jsx(Spinner, {}) : /*#__PURE__*/ _jsx(Lightning, {}),
+                    onClick: handleGenerateAltText,
                     tooltip: !id ? t('pleaseSaveDocumentFirst') : undefined,
                     children: t('generateAltText')
                 })

package/dist/components/GenerateAltTextButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/GenerateAltTextButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useDocumentInfo, useField, useLocale } from '@payloadcms/ui'\nimport { useTransition } from 'react'\n\nimport { Lightning } from './icons/Lightning.js'\nimport { Spinner } from './icons/Spinner.js'\nimport { usePluginTranslation } from '../utils/usePluginTranslation.js'\n\nexport function GenerateAltTextButton() {\n  const { t } = usePluginTranslation()\n  const { id, collectionSlug } = useDocumentInfo()\n  const locale = useLocale()\n  const [isPending, startTransition] = useTransition()\n\n  const { setValue: setKeywords } = useField<string>({ path: 'keywords' })\n  const { setValue: setAltText } = useField<string>({ path: 'alt' })\n\n  const handleGenerateAltText = async () => {\n    if (!collectionSlug || !id) {\n      toast.error(t('cannotGenerateMissingFields'))\n      throw new Error('Missing required fields')\n    }\n\n    startTransition(async () => {\n      try {\n        const response = await fetch('/api/alt-text-plugin/generate-alt-text', {\n          method: 'POST',\n          body: JSON.stringify({\n            collection: collectionSlug,\n            id: id as string,\n            locale: locale?.code ?? null, // sent null when localization is disabled\n          }),\n        })\n\n        if (!response.ok) {\n          let errorMessage = t('failedToGenerate')\n          try {\n            const errorData = (await response.json()) as { error: string }\n            errorMessage = errorData.error\n          } catch (error) {\n            console.error('Error generating alt text:', error)\n          }\n\n          toast.error(errorMessage)\n          return\n        }\n\n        const data = (await response.json()) as {\n          altText: string\n          keywords: string[]\n        }\n\n        if (data.altText && data.keywords) {\n          setAltText(data.altText)\n          setKeywords(data.keywords)\n          toast.success(t('altTextGeneratedSuccess'))\n        } else {\n          toast.error(t('noAltTextGenerated'))\n        }\n      } catch (error) {\n        console.error('Error generating alt text:', error)\n        toast.error(t('errorGeneratingAltText'))\n      }\n    })\n  }\n\n  return (\n    <div style={{ display: 'flex', gap: '20px', marginTop: '10px' }}>\n      <div style={{ flex: '1', color: 'var(--theme-elevation-400)' }}>\n        <p>{t('altTextDescription')}</p>\n        <ol style={{ paddingLeft: '20px', margin: '10px 0' }}>\n          <li>{t('altTextRequirement1')}</li>\n          <li>{t('altTextRequirement2')}</li>\n          <li>{t('altTextRequirement3')}</li>\n        </ol>\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center' }}>\n        <Button\n          onClick={handleGenerateAltText}\n          disabled={isPending || !id}\n          icon={isPending ? <Spinner /> : <Lightning />}\n          tooltip={!id ? t('pleaseSaveDocumentFirst') : undefined}\n        >\n          {t('generateAltText')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["Button","toast","useDocumentInfo","useField","useLocale","useTransition","Lightning","Spinner","usePluginTranslation","GenerateAltTextButton","t","id","collectionSlug","locale","isPending","startTransition","setValue","setKeywords","path","setAltText","handleGenerateAltText","error","Error","response","fetch","method","body","JSON","stringify","collection","code","ok","errorMessage","errorData","json","console","data","altText","keywords","success","div","style","display","gap","marginTop","flex","color","p","ol","paddingLeft","margin","li","alignItems","onClick","disabled","icon","tooltip","undefined"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,iBAAgB;AACpF,SAASC,aAAa,QAAQ,QAAO;AAErC,SAASC,SAAS,QAAQ,uBAAsB;AAChD,SAASC,OAAO,QAAQ,qBAAoB;AAC5C,SAASC,oBAAoB,QAAQ,mCAAkC;AAEvE,OAAO,SAASC;IACd,MAAM,EAAEC,CAAC,EAAE,GAAGF;IACd,MAAM,EAAEG,EAAE,EAAEC,cAAc,EAAE,GAAGV;IAC/B,MAAMW,SAAST;IACf,MAAM,CAACU,WAAWC,gBAAgB,GAAGV;IAErC,MAAM,EAAEW,UAAUC,WAAW,EAAE,GAAGd,SAAiB;QAAEe,MAAM;IAAW;IACtE,MAAM,EAAEF,UAAUG,UAAU,EAAE,GAAGhB,SAAiB;QAAEe,MAAM;IAAM;IAEhE,MAAME,wBAAwB;QAC5B,IAAI,CAACR,kBAAkB,CAACD,IAAI;YAC1BV,MAAMoB,KAAK,CAACX,EAAE;YACd,MAAM,IAAIY,MAAM;QAClB;QAEAP,gBAAgB;YACd,IAAI;gBACF,MAAMQ,WAAW,MAAMC,MAAM,0CAA0C;oBACrEC,QAAQ;oBACRC,MAAMC,KAAKC,SAAS,CAAC;wBACnBC,YAAYjB;wBACZD,IAAIA;wBACJE,QAAQA,QAAQiB,QAAQ;oBAC1B;gBACF;gBAEA,IAAI,CAACP,SAASQ,EAAE,EAAE;oBAChB,IAAIC,eAAetB,EAAE;oBACrB,IAAI;wBACF,MAAMuB,YAAa,MAAMV,SAASW,IAAI;wBACtCF,eAAeC,UAAUZ,KAAK;oBAChC,EAAE,OAAOA,OAAO;wBACdc,QAAQd,KAAK,CAAC,8BAA8BA;oBAC9C;oBAEApB,MAAMoB,KAAK,CAACW;oBACZ;gBACF;gBAEA,MAAMI,OAAQ,MAAMb,SAASW,IAAI;gBAKjC,IAAIE,KAAKC,OAAO,IAAID,KAAKE,QAAQ,EAAE;oBACjCnB,WAAWiB,KAAKC,OAAO;oBACvBpB,YAAYmB,KAAKE,QAAQ;oBACzBrC,MAAMsC,OAAO,CAAC7B,EAAE;gBAClB,OAAO;oBACLT,MAAMoB,KAAK,CAACX,EAAE;gBAChB;YACF,EAAE,OAAOW,OAAO;gBACdc,QAAQd,KAAK,CAAC,8BAA8BA;gBAC5CpB,MAAMoB,KAAK,CAACX,EAAE;YAChB;QACF;IACF;IAEA,qBACE,MAAC8B;QAAIC,OAAO;YAAEC,SAAS;YAAQC,KAAK;YAAQC,WAAW;QAAO;;0BAC5D,MAACJ;gBAAIC,OAAO;oBAAEI,MAAM;oBAAKC,OAAO;gBAA6B;;kCAC3D,KAACC;kCAAGrC,EAAE;;kCACN,MAACsC;wBAAGP,OAAO;4BAAEQ,aAAa;4BAAQC,QAAQ;wBAAS;;0CACjD,KAACC;0CAAIzC,EAAE;;0CACP,KAACyC;0CAAIzC,EAAE;;0CACP,KAACyC;0CAAIzC,EAAE;;;;;;0BAGX,KAAC8B;gBAAIC,OAAO;oBAAEC,SAAS;oBAAQU,YAAY;gBAAS;0BAClD,cAAA,KAACpD;oBACCqD,SAASjC;oBACTkC,UAAUxC,aAAa,CAACH;oBACxB4C,MAAMzC,0BAAY,KAACP,6BAAa,KAACD;oBACjCkD,SAAS,CAAC7C,KAAKD,EAAE,6BAA6B+C;8BAE7C/C,EAAE;;;;;AAKb"}
+{"version":3,"sources":["../../src/components/GenerateAltTextButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useDocumentInfo, useField, useLocale } from '@payloadcms/ui'\nimport { useTransition } from 'react'\n\nimport { usePluginTranslation } from '../utils/usePluginTranslation.js'\nimport { Lightning } from './icons/Lightning.js'\nimport { Spinner } from './icons/Spinner.js'\n\nexport function GenerateAltTextButton() {\n  const { t } = usePluginTranslation()\n  const { id, collectionSlug } = useDocumentInfo()\n  const locale = useLocale()\n  const [isPending, startTransition] = useTransition()\n\n  const { setValue: setKeywords } = useField<string>({ path: 'keywords' })\n  const { setValue: setAltText } = useField<string>({ path: 'alt' })\n\n  const handleGenerateAltText = () => {\n    if (!collectionSlug || !id) {\n      toast.error(t('cannotGenerateMissingFields'))\n      throw new Error('Missing required fields')\n    }\n\n    startTransition(async () => {\n      try {\n        const response = await fetch('/api/alt-text-plugin/generate-alt-text', {\n          body: JSON.stringify({\n            id: id as string,\n            collection: collectionSlug,\n            locale: locale?.code ?? null, // sent null when localization is disabled\n          }),\n          method: 'POST',\n        })\n\n        if (!response.ok) {\n          let errorMessage = t('failedToGenerate')\n          try {\n            const errorData = (await response.json()) as { error: string }\n            errorMessage = errorData.error\n          } catch (error) {\n            console.error('Error generating alt text:', error)\n          }\n\n          toast.error(errorMessage)\n          return\n        }\n\n        const data = (await response.json()) as {\n          altText: string\n          keywords: string[]\n        }\n\n        if (data.altText && data.keywords) {\n          setAltText(data.altText)\n          setKeywords(data.keywords)\n          toast.success(t('altTextGeneratedSuccess'))\n        } else {\n          toast.error(t('noAltTextGenerated'))\n        }\n      } catch (error) {\n        console.error('Error generating alt text:', error)\n        toast.error(t('errorGeneratingAltText'))\n      }\n    })\n  }\n\n  return (\n    <div style={{ display: 'flex', gap: '20px', marginTop: '10px' }}>\n      <div style={{ color: 'var(--theme-elevation-400)', flex: '1' }}>\n        <p>{t('altTextDescription')}</p>\n        <ol style={{ margin: '10px 0', paddingLeft: '20px' }}>\n          <li>{t('altTextRequirement1')}</li>\n          <li>{t('altTextRequirement2')}</li>\n          <li>{t('altTextRequirement3')}</li>\n        </ol>\n      </div>\n      <div style={{ alignItems: 'center', display: 'flex' }}>\n        <Button\n          disabled={isPending || !id}\n          icon={isPending ? <Spinner /> : <Lightning />}\n          onClick={handleGenerateAltText}\n          tooltip={!id ? t('pleaseSaveDocumentFirst') : undefined}\n        >\n          {t('generateAltText')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["Button","toast","useDocumentInfo","useField","useLocale","useTransition","usePluginTranslation","Lightning","Spinner","GenerateAltTextButton","t","id","collectionSlug","locale","isPending","startTransition","setValue","setKeywords","path","setAltText","handleGenerateAltText","error","Error","response","fetch","body","JSON","stringify","collection","code","method","ok","errorMessage","errorData","json","console","data","altText","keywords","success","div","style","display","gap","marginTop","color","flex","p","ol","margin","paddingLeft","li","alignItems","disabled","icon","onClick","tooltip","undefined"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,iBAAgB;AACpF,SAASC,aAAa,QAAQ,QAAO;AAErC,SAASC,oBAAoB,QAAQ,mCAAkC;AACvE,SAASC,SAAS,QAAQ,uBAAsB;AAChD,SAASC,OAAO,QAAQ,qBAAoB;AAE5C,OAAO,SAASC;IACd,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,EAAE,EAAEC,cAAc,EAAE,GAAGV;IAC/B,MAAMW,SAAST;IACf,MAAM,CAACU,WAAWC,gBAAgB,GAAGV;IAErC,MAAM,EAAEW,UAAUC,WAAW,EAAE,GAAGd,SAAiB;QAAEe,MAAM;IAAW;IACtE,MAAM,EAAEF,UAAUG,UAAU,EAAE,GAAGhB,SAAiB;QAAEe,MAAM;IAAM;IAEhE,MAAME,wBAAwB;QAC5B,IAAI,CAACR,kBAAkB,CAACD,IAAI;YAC1BV,MAAMoB,KAAK,CAACX,EAAE;YACd,MAAM,IAAIY,MAAM;QAClB;QAEAP,gBAAgB;YACd,IAAI;gBACF,MAAMQ,WAAW,MAAMC,MAAM,0CAA0C;oBACrEC,MAAMC,KAAKC,SAAS,CAAC;wBACnBhB,IAAIA;wBACJiB,YAAYhB;wBACZC,QAAQA,QAAQgB,QAAQ;oBAC1B;oBACAC,QAAQ;gBACV;gBAEA,IAAI,CAACP,SAASQ,EAAE,EAAE;oBAChB,IAAIC,eAAetB,EAAE;oBACrB,IAAI;wBACF,MAAMuB,YAAa,MAAMV,SAASW,IAAI;wBACtCF,eAAeC,UAAUZ,KAAK;oBAChC,EAAE,OAAOA,OAAO;wBACdc,QAAQd,KAAK,CAAC,8BAA8BA;oBAC9C;oBAEApB,MAAMoB,KAAK,CAACW;oBACZ;gBACF;gBAEA,MAAMI,OAAQ,MAAMb,SAASW,IAAI;gBAKjC,IAAIE,KAAKC,OAAO,IAAID,KAAKE,QAAQ,EAAE;oBACjCnB,WAAWiB,KAAKC,OAAO;oBACvBpB,YAAYmB,KAAKE,QAAQ;oBACzBrC,MAAMsC,OAAO,CAAC7B,EAAE;gBAClB,OAAO;oBACLT,MAAMoB,KAAK,CAACX,EAAE;gBAChB;YACF,EAAE,OAAOW,OAAO;gBACdc,QAAQd,KAAK,CAAC,8BAA8BA;gBAC5CpB,MAAMoB,KAAK,CAACX,EAAE;YAChB;QACF;IACF;IAEA,qBACE,MAAC8B;QAAIC,OAAO;YAAEC,SAAS;YAAQC,KAAK;YAAQC,WAAW;QAAO;;0BAC5D,MAACJ;gBAAIC,OAAO;oBAAEI,OAAO;oBAA8BC,MAAM;gBAAI;;kCAC3D,KAACC;kCAAGrC,EAAE;;kCACN,MAACsC;wBAAGP,OAAO;4BAAEQ,QAAQ;4BAAUC,aAAa;wBAAO;;0CACjD,KAACC;0CAAIzC,EAAE;;0CACP,KAACyC;0CAAIzC,EAAE;;0CACP,KAACyC;0CAAIzC,EAAE;;;;;;0BAGX,KAAC8B;gBAAIC,OAAO;oBAAEW,YAAY;oBAAUV,SAAS;gBAAO;0BAClD,cAAA,KAAC1C;oBACCqD,UAAUvC,aAAa,CAACH;oBACxB2C,MAAMxC,0BAAY,KAACN,6BAAa,KAACD;oBACjCgD,SAASnC;oBACToC,SAAS,CAAC7C,KAAKD,EAAE,6BAA6B+C;8BAE7C/C,EAAE;;;;;AAKb"}

package/dist/components/icons/Lightning.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Lightning() {
     return /*#__PURE__*/ _jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 20 20",
         fill: "currentColor",
         style: {
             height: '1rem',
             width: '1rem'
         },
+        viewBox: "0 0 20 20",
+        xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ _jsx("path", {
-            fillRule: "evenodd",
+            clipRule: "evenodd",
             d: "M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z",
-            clipRule: "evenodd"
+            fillRule: "evenodd"
         })
     });
 }

package/dist/components/icons/Lightning.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icons/Lightning.tsx"],"sourcesContent":["export function Lightning() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      style={{\n        height: '1rem',\n        width: '1rem',\n      }}\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\n"],"names":["Lightning","svg","xmlns","viewBox","fill","style","height","width","path","fillRule","d","clipRule"],"mappings":";AAAA,OAAO,SAASA;IACd,qBACE,KAACC;QACCC,OAAM;QACNC,SAAQ;QACRC,MAAK;QACLC,OAAO;YACLC,QAAQ;YACRC,OAAO;QACT;kBAEA,cAAA,KAACC;YACCC,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}
+{"version":3,"sources":["../../../src/components/icons/Lightning.tsx"],"sourcesContent":["export function Lightning() {\n  return (\n    <svg\n      fill=\"currentColor\"\n      style={{\n        height: '1rem',\n        width: '1rem',\n      }}\n      viewBox=\"0 0 20 20\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\n"],"names":["Lightning","svg","fill","style","height","width","viewBox","xmlns","path","clipRule","d","fillRule"],"mappings":";AAAA,OAAO,SAASA;IACd,qBACE,KAACC;QACCC,MAAK;QACLC,OAAO;YACLC,QAAQ;YACRC,OAAO;QACT;QACAC,SAAQ;QACRC,OAAM;kBAEN,cAAA,KAACC;YACCC,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}

package/dist/components/icons/Spinner.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Spinner() {
     return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
-        viewBox: "0 0 24 24",
         style: {
+            animation: 'spin 1s linear infinite',
             height: '1rem',
-            width: '1rem',
-            animation: 'spin 1s linear infinite'
+            width: '1rem'
         },
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
         children: [
             /*#__PURE__*/ _jsx("style", {
                 children: `
@@ -19,21 +19,21 @@ export function Spinner() {
         `
             }),
             /*#__PURE__*/ _jsx("circle", {
-                style: {
-                    opacity: 0.25
-                },
                 cx: "12",
                 cy: "12",
                 r: "10",
                 stroke: "currentColor",
-                strokeWidth: "4"
+                strokeWidth: "4",
+                style: {
+                    opacity: 0.25
+                }
             }),
             /*#__PURE__*/ _jsx("path", {
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                fill: "currentColor",
                 style: {
                     opacity: 0.75
-                },
-                fill: "currentColor",
-                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
             })
         ]
     });

package/dist/components/icons/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icons/Spinner.tsx"],"sourcesContent":["export function Spinner() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      style={{\n        height: '1rem',\n        width: '1rem',\n        animation: 'spin 1s linear infinite',\n      }}\n    >\n      <style>\n        {`\n          @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        `}\n      </style>\n      <circle\n        style={{ opacity: 0.25 }}\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      ></circle>\n      <path\n        style={{ opacity: 0.75 }}\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n  )\n}\n"],"names":["Spinner","svg","xmlns","fill","viewBox","style","height","width","animation","circle","opacity","cx","cy","r","stroke","strokeWidth","path","d"],"mappings":";AAAA,OAAO,SAASA;IACd,qBACE,MAACC;QACCC,OAAM;QACNC,MAAK;QACLC,SAAQ;QACRC,OAAO;YACLC,QAAQ;YACRC,OAAO;YACPC,WAAW;QACb;;0BAEA,KAACH;0BACE,CAAC;;;;;QAKF,CAAC;;0BAEH,KAACI;gBACCJ,OAAO;oBAAEK,SAAS;gBAAK;gBACvBC,IAAG;gBACHC,IAAG;gBACHC,GAAE;gBACFC,QAAO;gBACPC,aAAY;;0BAEd,KAACC;gBACCX,OAAO;oBAAEK,SAAS;gBAAK;gBACvBP,MAAK;gBACLc,GAAE;;;;AAIV"}
+{"version":3,"sources":["../../../src/components/icons/Spinner.tsx"],"sourcesContent":["export function Spinner() {\n  return (\n    <svg\n      fill=\"none\"\n      style={{\n        animation: 'spin 1s linear infinite',\n        height: '1rem',\n        width: '1rem',\n      }}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <style>\n        {`\n          @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        `}\n      </style>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n        style={{ opacity: 0.25 }}\n      ></circle>\n      <path\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        fill=\"currentColor\"\n        style={{ opacity: 0.75 }}\n      ></path>\n    </svg>\n  )\n}\n"],"names":["Spinner","svg","fill","style","animation","height","width","viewBox","xmlns","circle","cx","cy","r","stroke","strokeWidth","opacity","path","d"],"mappings":";AAAA,OAAO,SAASA;IACd,qBACE,MAACC;QACCC,MAAK;QACLC,OAAO;YACLC,WAAW;YACXC,QAAQ;YACRC,OAAO;QACT;QACAC,SAAQ;QACRC,OAAM;;0BAEN,KAACL;0BACE,CAAC;;;;;QAKF,CAAC;;0BAEH,KAACM;gBACCC,IAAG;gBACHC,IAAG;gBACHC,GAAE;gBACFC,QAAO;gBACPC,aAAY;gBACZX,OAAO;oBAAEY,SAAS;gBAAK;;0BAEzB,KAACC;gBACCC,GAAE;gBACFf,MAAK;gBACLC,OAAO;oBAAEY,SAAS;gBAAK;;;;AAI/B"}