@kaspernj/api-maker 1.0.412 → 1.0.414

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.412",
+  "version": "1.0.414",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -24,6 +24,7 @@
     "debounce": ">= 2.0.0",
     "diggerize": ">= 1.0.5",
     "epic-locks": ">= 1.0.2",
+    "file-saver": "^2.0.5",
     "form-data-objectizer": ">= 1.0.0",
     "form-serialize": ">= 0.7.2",
     "format-number": ">= 3.0.0",
@@ -34,6 +35,7 @@
     "object-to-formdata": ">= 4.1.0",
     "on-location-changed": ">= 1.0.13",
     "qs": ">= 6.9.3",
+    "react-native-vector-icons": "^10.2.0",
     "replaceall": ">= 0.1.6",
     "set-state-compare": "^1.0.49",
     "spark-md5": "^3.0.2",

package/src/super-admin/layout/header/index.jsx

@@ -1,6 +1,6 @@
 import "./style"
 import BaseComponent from "../../../base-component"
-import Icon from "../../../icon"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import {memo, useRef} from "react"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
@@ -108,11 +108,11 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
         <View dataSet={{class: "burger-menu-container"}}>
           {actions &&
             <Pressable dataSet={{class: "actions-link"}} onPress={this.tt.onGearsClicked} style={{marginRight: 8, fontSize: 22}}>
-              <Icon icon="gear-solid" />
+              <FontAwesomeIcon name="gear-solid" size={20} />
             </Pressable>
           }
           <Pressable dataSet={{class: "burger-menu-link"}} onPress={onTriggerMenu}>
-            <Icon icon="bars-solid" />
+            <FontAwesomeIcon icon="bars" size={20} />
           </Pressable>
         </View>
       </View>

package/src/table/column-content.jsx

@@ -0,0 +1,119 @@
+import {digs} from "diggerize"
+import * as inflection from "inflection"
+import modelCallbackArgs from "./model-callback-args.mjs"
+import MoneyFormatter from "../money-formatter"
+import {Text} from "react-native"
+
+export default class ApiMakerTableColumnContent {
+  constructor({column, mode = "react-native", model, table}) {
+    this.column = column
+    this.mode = mode
+    this.model = model
+    this.table = table
+  }
+
+  columnContentFromContentArg() {
+    const args = modelCallbackArgs(this.table, this.model)
+
+    args.mode = this.mode
+
+    const value = this.column.content(args)
+
+    return this.presentColumnValue(value)
+  }
+
+  columnsContentFromAttributeAndPath() {
+    const {attribute: attributeName} = digs(this.column, "attribute")
+    const attributeNameUnderscore = inflection.underscore(attributeName)
+    const path = this.column.path || []
+    let value
+    let currentModel = this.model
+
+    if (path.length > 0) {
+      for (const pathPart of path) {
+        currentModel = currentModel[pathPart]()
+        if (!currentModel) return
+      }
+    }
+
+    if (!(attributeName in currentModel)) {
+      throw new Error(`${currentModel.constructor.modelName().human()} doesn't respond to ${attributeName}`)
+    }
+
+    if (currentModel.isAttributeLoaded(attributeName)) {
+      value = currentModel[attributeName]()
+    }
+
+    const attribute = currentModel.constructor.attributes().find((attribute) => attribute.name() == attributeNameUnderscore)
+    const modelColumn = attribute?.getColumn()
+
+    if (modelColumn?.getType() == "date" && value) {
+      const contentText = this.presentDateTime({apiMakerType: "date", value})
+
+      if (this.mode == "html") {
+        return contentText
+      } else {
+        return (
+          <Text>{contentText}</Text>
+        )
+      }
+    }
+
+    return this.presentColumnValue(value)
+  }
+
+  content() {
+    if (this.column.content) {
+      return this.columnContentFromContentArg()
+    } else if (!this.column.content && this.column.attribute) {
+      return this.columnsContentFromAttributeAndPath()
+    }
+  }
+
+  presentColumnValue(value) {
+    let contentText
+
+    if (value instanceof Date) {
+      contentText = this.presentDateTime({value})
+    } else if (MoneyFormatter.isMoney(value)) {
+      contentText = MoneyFormatter.format(value)
+    } else if (typeof value == "boolean") {
+      if (value) {
+        contentText = I18n.t("js.shared.yes", {defaultValue: "Yes"})
+      } else {
+        contentText = I18n.t("js.shared.no", {defaultValue: "No"})
+      }
+    } else if (Array.isArray(value)) {
+      contentText = value
+        .map((valuePart) => this.presentColumnValue(valuePart))
+        .filter((valuePart) => Boolean(valuePart))
+        .join(", ")
+
+    } else if (typeof value == "string") {
+      contentText = value
+    } else {
+      // Its a React node - just return it and trust the provider to be HTML compatible.
+      return value
+    }
+
+    if (this.mode == "html") {
+      return contentText
+    }
+
+    return <Text>{contentText}</Text>
+  }
+
+  presentDateTime({apiMakerType, value}) {
+    if (!apiMakerType || apiMakerType == "time") {
+      const dateTimeFormatName = this.table.props.defaultDateTimeFormatName || "time.formats.default"
+
+      return I18n.l(dateTimeFormatName, value)
+    } else if (apiMakerType == "date") {
+      const dateFormatName = this.table.props.defaultDateFormatName || "date.formats.default"
+
+      return I18n.l(dateFormatName, value)
+    } else {
+      throw new Error(`Unhandled type: ${apiMakerType}`)
+    }
+  }
+}

package/src/table/model-callback-args.mjs

@@ -0,0 +1,10 @@
+import * as inflection from "inflection"
+
+export default function modelCallbackArgs(table, model) {
+  const modelArgName = inflection.camelize(table.props.modelClass.modelClassData().name, true)
+  const modelCallbackArgs = {model}
+
+  modelCallbackArgs[modelArgName] = model
+
+  return modelCallbackArgs
+}

package/src/table/model-row.jsx

@@ -2,13 +2,13 @@ import {Pressable, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import Column from "./components/column"
+import ColumnContent from "./column-content"
 import columnIdentifier from "./column-identifier.mjs"
 import columnVisible from "./column-visible.mjs"
-import {digs} from "diggerize"
-import Icon from "../icon"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import * as inflection from "inflection"
+import modelCallbackArgs from "./model-callback-args.mjs"
 import Link from "../link"
-import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import Row from "./components/row"
@@ -24,20 +24,20 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     index: PropTypes.number.isRequired,
     isSmallScreen: PropTypes.bool.isRequired,
     model: PropTypes.object.isRequired,
-    liveTable: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
     preparedColumns: PropTypes.array,
     tableSettingFullCacheKey: PropTypes.string.isRequired
   })
 
   render() {
-    const {index, liveTable, model} = this.p
-    const {modelClass, workplace} = liveTable.p
-    const {actionsContent, destroyEnabled, editModelPath, viewModelPath} = liveTable.props
-    const {columns, currentWorkplace} = liveTable.state
-    const {styleForColumn, styleForRow} = liveTable.tt
+    const {index, table, model} = this.p
+    const {modelClass, workplace} = table.p
+    const {actionsContent, destroyEnabled, editModelPath, viewModelPath} = table.props
+    const {columns, currentWorkplace} = table.state
+    const {styleForColumn, styleForRow} = table.tt
     const even = index % 2 == 0
 
-    this.modelCallbackArgs = this._modelCallbackArgs() // 'model' can change so this needs to be re-cached for every render
+    this.modelCallbackArgs = modelCallbackArgs(table, model) // 'model' can change so this needs to be re-cached for every render
 
     let editPath, viewPath
 
@@ -65,20 +65,20 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
         }
         {columns && this.columnsContentFromColumns(model, even)}
         <Column dataSet={{class: "actions-column"}} style={styleForColumn({even, style: {}, type: "actions"})}>
-          {actionsContent && actionsContent(this.modelCallbackArgs)}
+          {actionsContent && actionsContent(this.tt.modelCallbackArgs)}
           {viewPath &&
-            <Link dataSet={{class: "view-button"}} to={viewPath}>
-              <Icon icon="magnifying-glass-solid" />
+            <Link dataSet={{class: "view-button"}} style={{marginLeft: 2, marginRight: 2}} to={viewPath}>
+              <FontAwesomeIcon name="search" size={18} />
             </Link>
           }
           {editPath &&
-            <Link dataSet={{class: "edit-button"}} to={editPath}>
-              <Icon icon="pen-solid" />
+            <Link dataSet={{class: "edit-button"}} style={{marginLeft: 2, marginRight: 2}} to={editPath}>
+              <FontAwesomeIcon name="pencil" size={20} />
             </Link>
           }
           {destroyEnabled && model.can("destroy") &&
-            <Pressable dataSet={{class: "destroy-button"}} onPress={this.tt.onDestroyClicked}>
-              <Icon icon="xmark-solid" />
+            <Pressable dataSet={{class: "destroy-button"}} style={{marginLeft: 2, marginRight: 2}} onPress={this.tt.onDestroyClicked}>
+              <FontAwesomeIcon name="remove" size={22} />
             </Pressable>
           }
         </Column>
@@ -96,7 +96,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns(model, even) {
-    const {isSmallScreen, liveTable, preparedColumns} = this.p
+    const {isSmallScreen, table, preparedColumns} = this.p
 
     return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
       <Column
@@ -105,74 +105,25 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
           identifier: columnIdentifier(column)
         }}
         key={columnIdentifier(column)}
-        style={liveTable.styleForColumn({column, columnIndex, even, style: {width: `${width}%`}})}
-        {...liveTable.columnProps(column)}
+        style={table.styleForColumn({column, columnIndex, even, style: {width: `${width}%`}})}
+        {...table.columnProps(column)}
       >
         {isSmallScreen &&
           <View dataSet={{class: "table--column-label"}}>
             <Text>
-              {liveTable.headerLabelForColumn(column)}
+              {table.headerLabelForColumn(column)}
             </Text>
           </View>
         }
         <View dataSet={{class: "table--column-value"}}>
-          {column.content && this.columnContentFromContentArg(column, model)}
-          {!column.content && column.attribute && this.columnsContentFromAttributeAndPath(column, model)}
+          {new ColumnContent({column, model, table}).content()}
         </View>
       </Column>
     )
   }
 
-  columnContentFromContentArg (column, _model) {
-    const value = column.content(this.modelCallbackArgs)
-
-    return this.presentColumnValue(value)
-  }
-
-  columnsContentFromAttributeAndPath (column, model) {
-    const {attribute: attributeName} = digs(column, "attribute")
-    const attributeNameUnderscore = inflection.underscore(attributeName)
-    const path = column.path || []
-    let value
-    let currentModel = model
-
-    if (path.length > 0) {
-      for (const pathPart of path) {
-        currentModel = currentModel[pathPart]()
-        if (!currentModel) return
-      }
-    }
-
-    if (!(attributeName in currentModel)) {
-      throw new Error(`${currentModel.constructor.modelName().human()} doesn't respond to ${attributeName}`)
-    }
-
-    if (currentModel.isAttributeLoaded(attributeName)) value = currentModel[attributeName]()
-
-    const attribute = currentModel.constructor.attributes().find((attribute) => attribute.name() == attributeNameUnderscore)
-    const modelColumn = attribute?.getColumn()
-
-    if (modelColumn?.getType() == "date" && value) {
-      return (
-        <Text>{this.presentDateTime({apiMakerType: "date", value})}</Text>
-      )
-    }
-
-    return this.presentColumnValue(value)
-  }
-
-  _modelCallbackArgs () {
-    const {model} = this.p
-    const modelArgName = inflection.camelize(this.props.liveTable.props.modelClass.modelClassData().name, true)
-    const modelCallbackArgs = {model}
-
-    modelCallbackArgs[modelArgName] = model
-
-    return modelCallbackArgs
-  }
-
   onDestroyClicked = async () => {
-    const {destroyMessage} = this.p.liveTable.props
+    const {destroyMessage} = this.p.table.props
     const {model} = this.p
 
     if (!confirm(I18n.t("js.shared.are_you_sure"))) {
@@ -189,46 +140,4 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
       FlashMessage.errorResponse(error)
     }
   }
-
-  presentColumnValue(value) {
-    if (value instanceof Date) {
-      return <Text>{this.presentDateTime({value})}</Text>
-    } else if (MoneyFormatter.isMoney(value)) {
-      return <Text>{MoneyFormatter.format(value)}</Text>
-    } else if (typeof value == "boolean") {
-      if (value) {
-        return <Text>{I18n.t("js.shared.yes", {defaultValue: "Yes"})}</Text>
-      }
-
-      return <Text>{I18n.t("js.shared.no", {defaultValue: "No"})}</Text>
-    } else if (Array.isArray(value)) {
-      return (
-        <Text>
-          {value
-            .map((valuePart) => this.presentColumnValue(valuePart))
-            .filter((valuePart) => Boolean(valuePart))
-            .join(", ")
-          }
-        </Text>
-      )
-    } else if (typeof value == "string") {
-      return <Text>{value}</Text>
-    }
-
-    return <Text>{value}</Text>
-  }
-
-  presentDateTime({apiMakerType, value}) {
-    if (!apiMakerType || apiMakerType == "time") {
-      const dateTimeFormatName = this.props.liveTable.props.defaultDateTimeFormatName || "time.formats.default"
-
-      return I18n.l(dateTimeFormatName, value)
-    } else if (apiMakerType == "date") {
-      const dateFormatName = this.props.liveTable.props.defaultDateFormatName || "date.formats.default"
-
-      return I18n.l(dateFormatName, value)
-    } else {
-      throw new Error(`Unhandled type: ${apiMakerType}`)
-    }
-  }
 }))

package/src/table/settings/download-action.jsx

@@ -0,0 +1,66 @@
+import BaseComponent from "../../base-component"
+import ColumnContent from "../column-content"
+import columnIdentifier from "../column-identifier.mjs"
+import columnVisible from "../column-visible.mjs"
+import {saveAs} from "file-saver"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import {memo} from "react"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {renderToString} from "react-dom/server"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Pressable, Text} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerTableSettingsDownloadAction extends BaseComponent {
+  static propTypes = propTypesExact({
+    table: PropTypes.object.isRequired
+  })
+
+  render() {
+    return (
+      <Pressable onPress={this.tt.onDownloadPress} style={{flexDirection: "row", alignItems: "center"}}>
+        <FontAwesomeIcon name="download" size={20} />
+        <Text style={{marginLeft: 5}}>
+          Download
+        </Text>
+      </Pressable>
+    )
+  }
+
+  onDownloadPress = () => {
+    const {table} = this.p
+    const {modelClass} = table.p
+    const {collection} = table.tt
+    const {models} = collection
+    const {preparedColumns} = table.s
+    const tableElement = (
+      <table>
+        <thead>
+          <tr>
+            {preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+              <th key={columnIdentifier(column)}>
+                {table.headerLabelForColumn(column)}
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {models.map((model) =>
+            <tr key={model.id()}>
+              {preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
+                <td key={columnIdentifier(column)}>
+                  {new ColumnContent({column, mode: "html", model, table}).content()}
+                </td>
+              )}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    )
+    const tableHTML = renderToString(tableElement)
+    const blob = new Blob([tableHTML], {type: "text/html;charset=utf-8"})
+    const fileName = `${modelClass.modelName().human({count: 2})}.html`
+
+    saveAs(blob, fileName)
+  }
+}))

package/src/table/settings/index.jsx

@@ -1,6 +1,7 @@
 import BaseComponent from "../../base-component"
 import columnIdentifier from "../column-identifier.mjs"
 import ColumnRow from "./column-row"
+import DownloadAction from "./download-action"
 import {memo, useRef} from "react"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
@@ -46,6 +47,7 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
               Settings
             </Text>
           </View>
+          <DownloadAction table={table} />
           <View style={{marginBottom: 5}}>
             <Text style={{fontSize: 16, fontWeight: "bold"}}>
               Columns

package/src/table/table.jsx

@@ -9,9 +9,9 @@ import columnVisible from "./column-visible.mjs"
 import debounce from "debounce"
 import Filters from "./filters"
 import FlatList from "./components/flat-list"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import Header from "./components/header"
 import HeaderColumn from "./header-column"
-import Icon from "../icon"
 import * as inflection from "inflection"
 import modelClassRequire from "../model-class-require.mjs"
 import ModelRow from "./model-row"
@@ -480,9 +480,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         index={index}
         isSmallScreen={this.tt.isSmallScreen}
         key={model.id()}
-        liveTable={this}
         model={model}
         preparedColumns={preparedColumns}
+        table={this}
         tableSettingFullCacheKey={tableSettingFullCacheKey}
       />
     )
@@ -556,14 +556,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       <View style={{flexDirection: "row"}}>
         {controls && controls({models, qParams, query, result})}
         <Pressable dataSet={{class: "filter-button"}} onPress={this.tt.onFilterClicked}>
-          <Icon icon="magnifying-glass-solid" />
+          <FontAwesomeIcon name="search" size={20} />
         </Pressable>
         <View style={{position: "relative"}}>
           {showSettings &&
             <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
           <Pressable dataSet={{class: "settings-button"}} onPress={this.tt.onSettingsClicked}>
-            <Icon icon="gear-solid" />
+            <FontAwesomeIcon name="gear" size={20} />
           </Pressable>
         </View>
       </View>

package/src/icon.jsx

@@ -1,51 +0,0 @@
-import BaseComponent from "./base-component"
-import {Image} from "react-native"
-import {memo, useMemo} from "react"
-import PropTypes from "prop-types"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
-
-export default memo(shapeComponent(class ComponentsIcon extends BaseComponent {
-  static propTypes = {
-    icon: PropTypes.string.isRequired
-  }
-
-  setup() {
-    const {icon} = this.p
-
-    this.useStates({
-      IconComponent: null,
-      imageSource: null
-    })
-
-    useMemo(() => {
-      this.loadIcon()
-    }, [icon])
-  }
-
-  async loadIcon() {
-    const {icon} = this.p
-    const IconComponent = await import(`./icons/${icon}.svg`)
-
-    this.setState({IconComponent})
-  }
-
-  render() {
-    const {icon, style, ...restProps} = this.props
-    const {IconComponent} = this.s
-    const actualStyle = Object.assign(
-      {
-        width: 16,
-        height: 16
-      },
-      style
-    )
-
-    if (!IconComponent) {
-      return null
-    }
-
-    return (
-      <Image source={IconComponent.default} style={actualStyle} {...restProps} />
-    )
-  }
-}))

package/src/icons/bars-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

package/src/icons/gear-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>

package/src/icons/magnifying-glass-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>

package/src/icons/pen-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>

package/src/icons/xmark-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>