// Add a grip icon for drag handles
const ICON_PROPS_G = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.7,
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

const IconGrip = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <circle cx="9" cy="6" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="9" cy="12" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="9" cy="18" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="15" cy="6" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="15" cy="12" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="15" cy="18" r="1.2" fill="currentColor" stroke="none"/>
  </svg>
);

const IconUpload = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M12 4v12M7 9l5-5 5 5"/>
    <path d="M5 17v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2"/>
  </svg>
);

const IconCameraBody = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <rect x="3" y="7" width="15" height="12" rx="2"/>
    <path d="M18 11l3-2v8l-3-2z"/>
    <circle cx="10.5" cy="13" r="2.5"/>
    <path d="M7 7l1-2h5l1 2"/>
  </svg>
);

const IconAngle = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M5 19h15"/>
    <path d="M5 19L19 5"/>
    <path d="M5 19v-3"/>
    <path d="M9 19a4 4 0 0 0 0-3"/>
  </svg>
);

const IconShotType = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M4 4L12 18l8 -14"/>
    <path d="M9 6a5 5 0 0 0 6 0"/>
    <circle cx="12" cy="18" r="1" fill="currentColor" stroke="none"/>
  </svg>
);

const IconInvoice = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M6 3h10l3 3v15l-2.5-1.5L14 21l-2.5-1.5L9 21l-2.5-1.5L4 21V5a2 2 0 0 1 2-2z"/>
    <path d="M8 9h8M8 13h8M8 17h5"/>
  </svg>
);

const IconDownload = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M12 4v12M7 11l5 5 5-5"/>
    <path d="M5 19h14"/>
  </svg>
);

const IconCurrency = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <circle cx="12" cy="12" r="9"/>
    <path d="M15 9.5c-.7-1-2-1.5-3-1.5-1.7 0-3 1-3 2.3 0 1.3 1 1.9 3 2.4s3 1.1 3 2.4c0 1.4-1.3 2.3-3 2.3-1.2 0-2.4-.6-3-1.5M12 6.5v11"/>
  </svg>
);

const IconChevDownSmall = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M7 10l5 5 5-5"/>
  </svg>
);

const IconX = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M6 6l12 12M18 6L6 18"/>
  </svg>
);

const IconSend = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M21 3L11 14"/>
    <path d="M21 3l-7 18-3-9-9-3z"/>
  </svg>
);

const IconPrint = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M6 9V4h12v5"/>
    <rect x="3" y="9" width="18" height="8" rx="2"/>
    <rect x="6" y="14" width="12" height="7"/>
    <circle cx="17" cy="12.5" r="0.5" fill="currentColor" stroke="none"/>
  </svg>
);

const IconEye = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/>
    <circle cx="12" cy="12" r="3"/>
  </svg>
);

window.IconGrip = IconGrip;
window.IconUpload = IconUpload;
window.IconCameraBody = IconCameraBody;
window.IconAngle = IconAngle;
window.IconShotType = IconShotType;
window.IconInvoice = IconInvoice;
window.IconDownload = IconDownload;
window.IconCurrency = IconCurrency;
window.IconChevDownSmall = IconChevDownSmall;
window.IconX = IconX;
window.IconSend = IconSend;
window.IconPrint = IconPrint;
window.IconEye = IconEye;