@omnsight/osint-entity-components 0.1.1 → 0.1.3

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.1",
+  "version": "0.1.3",
   "engines": {
     "node": ">=24.0.0"
   },
@@ -77,6 +77,7 @@
     "postcss-simple-vars": "^7.0.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
-    "vite": "^8.0.1"
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/src/assets/icons/generated/mdi-account-tie.tsx

@@ -1,19 +1,8 @@
 // From: https://icon-sets.iconify.design/mdi/account-tie
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 export const IconMdiAccountTie = ({
   size = 24,
   ...props
 }: SVGProps<SVGSVGElement> & {
   size?: number | string;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    width={size}
-    height={size}
-    {...props}
-  >
-    <path d="M12 3c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4m4 10.54c0 1.06-.28 3.53-2.19 6.29L13 15l.94-1.88c-.62-.07-1.27-.12-1.94-.12s-1.32.05-1.94.12L11 15l-.81 4.83C8.28 17.07 8 14.6 8 13.54c-2.39.7-4 1.96-4 3.46v4h16v-4c0-1.5-1.6-2.76-4-3.46" />
-  </svg>
-);
+}) => <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width={size} height={size} {...props}><path d="M12 3c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4m4 10.54c0 1.06-.28 3.53-2.19 6.29L13 15l.94-1.88c-.62-.07-1.27-.12-1.94-.12s-1.32.05-1.94.12L11 15l-.81 4.83C8.28 17.07 8 14.6 8 13.54c-2.39.7-4 1.96-4 3.46v4h16v-4c0-1.5-1.6-2.76-4-3.46" /></svg>;

package/src/assets/icons/generated/mdi-factory.tsx

@@ -1,19 +1,8 @@
 // From: https://icon-sets.iconify.design/mdi/factory
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 export const IconMdiFactory = ({
   size = 24,
   ...props
 }: SVGProps<SVGSVGElement> & {
   size?: number | string;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    width={size}
-    height={size}
-    {...props}
-  >
-    <path d="M4 18v2h4v-2zm0-4v2h10v-2zm6 4v2h4v-2zm6-4v2h4v-2zm0 4v2h4v-2zM2 22V8l5 4V8l5 4V8l5 4 1-10h3l1 10v10z" />
-  </svg>
-);
+}) => <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width={size} height={size} {...props}><path d="M4 18v2h4v-2zm0-4v2h10v-2zm6 4v2h4v-2zm6-4v2h4v-2zm0 4v2h4v-2zM2 22V8l5 4V8l5 4V8l5 4 1-10h3l1 10v10z" /></svg>;

package/src/assets/icons/generated/mdi-tank.tsx

@@ -1,19 +1,8 @@
 // From: https://icon-sets.iconify.design/mdi/tank
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 export const IconMdiTank = ({
   size = 24,
   ...props
 }: SVGProps<SVGSVGElement> & {
   size?: number | string;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    width={size}
-    height={size}
-    {...props}
-  >
-    <path d="M20 12H4v-1h2l1-5h5l1 5h7zm-6.78-5 .4 2H22V7zM22 16a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3 3 3 0 0 1 3-3h14a3 3 0 0 1 3 3M6 16a1 1 0 0 0-1-1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1m7 0a1 1 0 0 0-1-1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1m7 0a1 1 0 0 0-1-1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1" />
-  </svg>
-);
+}) => <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width={size} height={size} {...props}><path d="M20 12H4v-1h2l1-5h5l1 5h7zm-6.78-5 .4 2H22V7zM22 16a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3 3 3 0 0 1 3-3h14a3 3 0 0 1 3 3M6 16a1 1 0 0 0-1-1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1m7 0a1 1 0 0 0-1-1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1m7 0a1 1 0 0 0-1-1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1" /></svg>;

package/src/assets/icons/generated/mingcute-government-line.tsx

@@ -1,25 +1,8 @@
 // From: https://icon-sets.iconify.design/mingcute/government-line
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 export const IconMingcuteGovernmentLine = ({
   size = 24,
   ...props
 }: SVGProps<SVGSVGElement> & {
   size?: number | string;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    width={size}
-    height={size}
-    {...props}
-  >
-    <g fill="none">
-      <path d="m12.593 23.258-.011.002-.071.035-.02.004-.014-.004-.071-.035q-.016-.005-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427q-.004-.016-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093q.019.005.029-.008l.004-.014-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014-.034.614q.001.018.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" />
-      <path
-        fill="currentColor"
-        d="M21 7a1 1 0 0 1 .117 1.993L21 9v10a1 1 0 0 1 .117 1.993L21 21H3a1 1 0 0 1-.117-1.993L3 19V9a1 1 0 0 1-.117-1.993L3 7zm-2 2H5v10h2v-7a1 1 0 1 1 2 0v7h2v-7a1 1 0 1 1 2 0v7h2v-7a1 1 0 1 1 2 0v7h2zm-1-5a1 1 0 1 1 0 2H6a1 1 0 0 1 0-2z"
-      />
-    </g>
-  </svg>
-);
+}) => <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width={size} height={size} {...props}><g fill="none"><path d="m12.593 23.258-.011.002-.071.035-.02.004-.014-.004-.071-.035q-.016-.005-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427q-.004-.016-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093q.019.005.029-.008l.004-.014-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014-.034.614q.001.018.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" /><path fill="currentColor" d="M21 7a1 1 0 0 1 .117 1.993L21 9v10a1 1 0 0 1 .117 1.993L21 21H3a1 1 0 0 1-.117-1.993L3 19V9a1 1 0 0 1-.117-1.993L3 7zm-2 2H5v10h2v-7a1 1 0 1 1 2 0v7h2v-7a1 1 0 1 1 2 0v7h2v-7a1 1 0 1 1 2 0v7h2zm-1-5a1 1 0 1 1 0 2H6a1 1 0 0 1 0-2z" /></g></svg>;

package/src/avatars/EventAvatar.tsx

@@ -1,9 +1,9 @@
-import "@/avatars/layouts/EntityStyles.css";
+import "../avatars/layouts/EntityStyles.css";
 import { Avatar, Tooltip } from "@mantine/core";
 import type { Event, Relation } from "omni-osint-crud-client";
-import { RelationTooltip } from "@/avatars/layouts/RelationTooltip";
-import { EventIcon } from "@/icons";
-import { EventCard } from "@/cards";
+import { RelationTooltip } from "./layouts/RelationTooltip";
+import { EventIcon } from "../icons";
+import { EventCard } from "../cards";
 
 interface Props {
   data: Event;

package/src/avatars/OrganizationAvatar.tsx

@@ -1,9 +1,9 @@
-import "@/avatars/layouts/EntityStyles.css";
+import "../avatars/layouts/EntityStyles.css";
 import { Avatar, Tooltip } from "@mantine/core";
 import type { Organization, Relation } from "omni-osint-crud-client";
-import { RelationTooltip } from "@/avatars/layouts/RelationTooltip";
-import { OrganizationIcon } from "@/icons";
-import { OrganizationCard } from "@/cards";
+import { RelationTooltip } from "./layouts/RelationTooltip";
+import { OrganizationIcon } from "../icons";
+import { OrganizationCard } from "../cards";
 
 interface Props {
   data: Organization;

package/src/avatars/PersonAvatar.tsx

@@ -1,9 +1,9 @@
-import "@/avatars/layouts/EntityStyles.css";
+import "../avatars/layouts/EntityStyles.css";
 import { Avatar, Tooltip } from "@mantine/core";
 import type { Person, Relation } from "omni-osint-crud-client";
-import { RelationTooltip } from "@/avatars/layouts/RelationTooltip";
-import { PersonIcon } from "@/icons";
-import { PersonCard } from "@/cards";
+import { RelationTooltip } from "./layouts/RelationTooltip";
+import { PersonIcon } from "../icons";
+import { PersonCard } from "../cards";
 
 interface Props {
   data: Person;

package/src/avatars/SourceAvatar.tsx

@@ -1,9 +1,9 @@
-import "@/avatars/layouts/EntityStyles.css";
+import "../avatars/layouts/EntityStyles.css";
 import { ActionIcon, Avatar, Group, Tooltip, Text } from "@mantine/core";
 import type { Source, Relation } from "omni-osint-crud-client";
-import { RelationTooltip } from "@/avatars/layouts/RelationTooltip";
-import { SourceIcon } from "@/icons";
-import { SourceCard } from "@/cards";
+import { RelationTooltip } from "./layouts/RelationTooltip";
+import { SourceIcon } from "../icons";
+import { SourceCard } from "../cards";
 
 interface Props {
   data: Source;

package/src/avatars/WebsiteAvatar.tsx

@@ -1,9 +1,9 @@
-import "@/avatars/layouts/EntityStyles.css";
+import "../avatars/layouts/EntityStyles.css";
 import { Avatar, Tooltip } from "@mantine/core";
 import type { Website, Relation } from "omni-osint-crud-client";
-import { RelationTooltip } from "@/avatars/layouts/RelationTooltip";
-import { WebsiteIcon } from "@/icons";
-import { WebsiteCard } from "@/cards";
+import { RelationTooltip } from "./layouts/RelationTooltip";
+import { WebsiteIcon } from "../icons";
+import { WebsiteCard } from "../cards";
 
 interface Props {
   data: Website;

package/src/icons/Event/Select.tsx

@@ -4,16 +4,45 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { EventIcon } from "./Icon";
 
-interface EventIconSelectProps {
-  value: Event;
-  onChange: (value: Event) => void;
+interface EventIconSelectorProps {
+  data: Event;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const EventIconSelect: React.FC<EventIconSelectProps> = ({
+export const EventIconSelector: React.FC<EventIconSelectorProps> = ({
+  data,
   value,
   onChange,
 }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`event.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<EventIcon event={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface EventColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -24,37 +53,46 @@ export const EventIconSelect: React.FC<EventIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface EventIconSelectProps {
+  value: Event;
+  onChange: (value: Event) => void;
+}
+
+export const EventIconSelect: React.FC<EventIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`event.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<EventIcon event={value} />}
-        defaultValue={translatedOptions[0].value}
+      <EventIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <EventColorSelector 
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Event/icons.ts

@@ -1,21 +1,21 @@
-import { IconMdiHandcuffs } from '@/assets/icons/generated/mdi-handcuffs';
-import { IconHugeiconsTradeUp } from '@/assets/icons/generated/hugeicons-trade-up';
-import { IconGameIconsPistolGun } from '@/assets/icons/generated/game-icons-pistol-gun';
-import { IconIcSharpOilBarrel } from '@/assets/icons/generated/ic-sharp-oil-barrel';
-import { IconRiSpyFill } from '@/assets/icons/generated/ri-spy-fill';
-import { IconFluentEmojiHighContrastMilitaryHelmet } from '@/assets/icons/generated/fluent-emoji-high-contrast-military-helmet';
-import { IconMdiTank } from '@/assets/icons/generated/mdi-tank';
-import { IconFaSolidShip } from '@/assets/icons/generated/fa-solid-ship';
-import { IconMdiAirplane } from '@/assets/icons/generated/mdi-airplane';
-import { IconGameIconsMissileLauncher } from '@/assets/icons/generated/game-icons-missile-launcher';
-import { IconGameIconsBombingRun } from '@/assets/icons/generated/game-icons-bombing-run';
-import { IconIonTrainSharp } from '@/assets/icons/generated/ion-train-sharp';
-import { IconFlowbiteTruckSolid } from '@/assets/icons/generated/flowbite-truck-solid';
-import { IconEmojioneMonotoneShip } from '@/assets/icons/generated/emojione-monotone-ship';
-import { IconFluentEmojiHighContrastBrokenChain } from '@/assets/icons/generated/fluent-emoji-high-contrast-broken-chain';
-import { IconRiExchangeBoxFill } from '@/assets/icons/generated/ri-exchange-box-fill';
-import { IconMingcutePhoneCallFill } from '@/assets/icons/generated/mingcute-phone-call-fill';
-import { IconBoxiconsAnnouncement } from '@/assets/icons/generated/boxicons-announcement';
+import { IconRiSpyFill } from '../../assets/icons/generated/ri-spy-fill';
+import { IconFluentEmojiHighContrastMilitaryHelmet } from '../../assets/icons/generated/fluent-emoji-high-contrast-military-helmet';
+import { IconMdiTank } from '../../assets/icons/generated/mdi-tank';
+import { IconFaSolidShip } from '../../assets/icons/generated/fa-solid-ship';
+import { IconMdiAirplane } from '../../assets/icons/generated/mdi-airplane';
+import { IconGameIconsMissileLauncher } from '../../assets/icons/generated/game-icons-missile-launcher';
+import { IconGameIconsBombingRun } from '../../assets/icons/generated/game-icons-bombing-run';
+import { IconGameIconsPistolGun } from '../../assets/icons/generated/game-icons-pistol-gun';
+import { IconMdiHandcuffs } from '../../assets/icons/generated/mdi-handcuffs';
+import { IconIonTrainSharp } from '../../assets/icons/generated/ion-train-sharp';
+import { IconFlowbiteTruckSolid } from '../../assets/icons/generated/flowbite-truck-solid';
+import { IconEmojioneMonotoneShip } from '../../assets/icons/generated/emojione-monotone-ship';
+import { IconFluentEmojiHighContrastBrokenChain } from '../../assets/icons/generated/fluent-emoji-high-contrast-broken-chain';
+import { IconHugeiconsTradeUp } from '../../assets/icons/generated/hugeicons-trade-up';
+import { IconIcSharpOilBarrel } from '../../assets/icons/generated/ic-sharp-oil-barrel';
+import { IconRiExchangeBoxFill } from '../../assets/icons/generated/ri-exchange-box-fill';
+import { IconMingcutePhoneCallFill } from '../../assets/icons/generated/mingcute-phone-call-fill';
+import { IconBoxiconsAnnouncement } from '../../assets/icons/generated/boxicons-announcement';
 
 interface IconOption {
   value: string;

package/src/icons/Organization/Select.tsx

@@ -4,16 +4,42 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { OrganizationIcon } from "./Icon";
 
-interface OrganizationIconSelectProps {
-  value: Organization;
-  onChange: (value: Organization) => void;
+interface OrganizationIconSelectorProps {
+  data: Organization;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
-  value,
-  onChange,
-}) => {
+export const OrganizationIconSelector: React.FC<
+  OrganizationIconSelectorProps
+> = ({ data, value, onChange }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`organization.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<OrganizationIcon organization={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface OrganizationColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const OrganizationColorSelector: React.FC<
+  OrganizationColorSelectorProps
+> = ({ value, onChange }) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -24,37 +50,46 @@ export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface OrganizationIconSelectProps {
+  value: Organization;
+  onChange: (value: Organization) => void;
+}
+
+export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`organization.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<OrganizationIcon organization={value} />}
-        defaultValue={translatedOptions[0].value}
+      <OrganizationIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <OrganizationColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Organization/icons.ts

@@ -1,9 +1,10 @@
-import { IconRiSeedlingLine } from '@/assets/icons/generated/ri-seedling-line';
-import { IconMingcuteGovernmentLine } from '@/assets/icons/generated/mingcute-government-line';
-import { IconStreamlineFlexDeepfakeTechnology1Solid } from '@/assets/icons/generated/streamline-flex-deepfake-technology-1-solid';
-import { IconPixelTechnology } from '@/assets/icons/generated/pixel-technology';
-import { IconMdiFactory } from '@/assets/icons/generated/mdi-factory';
-import { IconCodiconOrganization } from '@/assets/icons/generated/codicon-organization';
+import { IconStreamlineFlexDeepfakeTechnology1Solid } from '../../assets/icons/generated/streamline-flex-deepfake-technology-1-solid';
+import { IconPixelTechnology } from '../../assets/icons/generated/pixel-technology';
+import { IconRiSeedlingLine } from '../../assets/icons/generated/ri-seedling-line';
+import { IconMdiFactory } from '../../assets/icons/generated/mdi-factory';
+import { IconCodiconOrganization } from '../../assets/icons/generated/codicon-organization';
+import { IconMingcuteGovernmentLine } from '../../assets/icons/generated/mingcute-government-line';
+
 
 import { BuildingOfficeIcon } from '@heroicons/react/24/solid';
 

package/src/icons/Person/Select.tsx

@@ -4,13 +4,45 @@ import { Group, Select, ColorInput } from '@mantine/core';
 import { ICON_OPTIONS } from './icons';
 import { PersonIcon } from './Icon';
 
-interface PersonIconSelectProps {
-  value: Person;
-  onChange: (value: Person) => void;
+interface PersonIconSelectorProps {
+  data: Person;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({ value, onChange }) => {
+export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
+  data,
+  value,
+  onChange,
+}) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`person.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<PersonIcon person={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface PersonColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -21,34 +53,46 @@ export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({ value, onCha
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface PersonIconSelectProps {
+  value: Person;
+  onChange: (value: Person) => void;
+}
+
+export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
-    onChange({ ...value, attributes: { ...(value.attributes || {}), icon_color: color } });
+  const handleColorChange = (color: string | null) => {
+    onChange({
+      ...value,
+      attributes: { ...(value.attributes || {}), icon_color: color },
+    });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`person.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<PersonIcon person={value} />}
-        defaultValue={translatedOptions[0].value}
+      <PersonIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <PersonColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Person/icons.ts

@@ -1,6 +1,8 @@
-import { IconMdiAccountSchool } from '@/assets/icons/generated/mdi-account-school';
-import { IconMdiAccountTieHat } from '@/assets/icons/generated/mdi-account-tie-hat';
-import { IconMdiAccountTie } from '@/assets/icons/generated/mdi-account-tie';
+import { IconMdiAccountSchool } from '../../assets/icons/generated/mdi-account-school';
+import { IconMdiAccountTieHat } from '../../assets/icons/generated/mdi-account-tie-hat';
+import { IconMdiAccountTie } from '../../assets/icons/generated/mdi-account-tie';
+
+
 interface IconOption {
   value: string;
   label: string;

package/src/icons/Source/Select.tsx

@@ -4,16 +4,45 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { SourceIcon } from "./Icon";
 
-interface SourceIconSelectProps {
-  value: Source;
-  onChange: (value: Source) => void;
+interface SourceIconSelectorProps {
+  data: Source;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
+export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
+  data,
   value,
   onChange,
 }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`source.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<SourceIcon source={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface SourceColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#ababab",
     "#0089ff",
@@ -24,37 +53,46 @@ export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface SourceIconSelectProps {
+  value: Source;
+  onChange: (value: Source) => void;
+}
+
+export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`source.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<SourceIcon source={value} />}
-        defaultValue={translatedOptions[0].value}
+      <SourceIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <SourceColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Source/icons.ts

@@ -1,8 +1,9 @@
-import { IconUitSocialMediaLogo } from '@/assets/icons/generated/uit-social-media-logo';
-import { IconStreamlineCyberNewspaper2 } from '@/assets/icons/generated/streamline-cyber-newspaper-2';
-import { IconBasilDocumentSolid } from '@/assets/icons/generated/basil-document-solid';
-import { IconBoxiconsBook } from '@/assets/icons/generated/boxicons-book';
-import { IconGgWebsite } from '@/assets/icons/generated/gg-website';
+import { IconBasilDocumentSolid } from '../../assets/icons/generated/basil-document-solid';
+import { IconBoxiconsBook } from '../../assets/icons/generated/boxicons-book';
+import { IconUitSocialMediaLogo } from '../../assets/icons/generated/uit-social-media-logo';
+import { IconGgWebsite } from '../../assets/icons/generated/gg-website';
+import { IconStreamlineCyberNewspaper2 } from '../../assets/icons/generated/streamline-cyber-newspaper-2';
+
 
 interface IconOption {
   value: string;

package/src/icons/Website/Select.tsx

@@ -4,16 +4,45 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { WebsiteIcon } from "./Icon";
 
-interface WebsiteIconSelectProps {
-  value: Website;
-  onChange: (value: Website) => void;
+interface WebsiteIconSelectorProps {
+  data: Website;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
+export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
+  data,
   value,
   onChange,
 }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`website.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<WebsiteIcon website={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface WebsiteColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -24,37 +53,46 @@ export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface WebsiteIconSelectProps {
+  value: Website;
+  onChange: (value: Website) => void;
+}
+
+export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, title: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`website.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<WebsiteIcon website={value} />}
-        defaultValue={translatedOptions[0].value}
-        value={value.type}
+      <WebsiteIconSelector
+        data={value}
+        value={value.title}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <WebsiteColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Website/icons.ts

@@ -1,6 +1,7 @@
-import { IconMdiForum } from '@/assets/icons/generated/mdi-forum';
-import { IconStreamlineCyberNewspaper2 } from '@/assets/icons/generated/streamline-cyber-newspaper-2';
-import { IconMingcuteGovernmentLine } from '@/assets/icons/generated/mingcute-government-line';
+import { IconMdiForum } from '../../assets/icons/generated/mdi-forum';
+import { IconStreamlineCyberNewspaper2 } from '../../assets/icons/generated/streamline-cyber-newspaper-2';
+import { IconMingcuteGovernmentLine } from '../../assets/icons/generated/mingcute-government-line';
+
 
 import { BuildingOfficeIcon } from '@heroicons/react/24/solid';