@flamingo-stack/openframe-frontend-core 0.0.518-1660.4292.1 → 0.0.518-1663.4312.1

package/src/components/custom-external-link-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomExternalLinkIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomExternalLinkIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 21, 
+  height = 22,
+  ...props 
+}: CustomExternalLinkIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 21 22" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M0.375 17.0002V5.00024C0.375 2.72207 2.22183 0.875244 4.5 0.875244H7.5C8.12132 0.875244 8.625 1.37892 8.625 2.00024C8.625 2.62156 8.12132 3.12524 7.5 3.12524H4.5C3.46447 3.12524 2.625 3.96471 2.625 5.00024V17.0002C2.625 18.0358 3.46447 18.8752 4.5 18.8752H16.5C17.5355 18.8752 18.375 18.0358 18.375 17.0002V14.0002C18.375 13.3789 18.8787 12.8752 19.5 12.8752C20.1213 12.8752 20.625 13.3789 20.625 14.0002V17.0002C20.625 19.2784 18.7782 21.1252 16.5 21.1252H4.5C2.22183 21.1252 0.375 19.2784 0.375 17.0002Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M20.6255 7.49902L20.6196 7.61475C20.5623 8.18202 20.0829 8.62516 19.5005 8.62549C18.9182 8.62574 18.4394 8.18324 18.3813 7.61621L18.3755 7.50049L18.3726 4.71143L10.2954 12.7959C9.85618 13.235 9.14394 13.235 8.70459 12.7959C8.26524 12.3567 8.26543 11.6445 8.70459 11.2051L16.7817 3.12207H14C13.3787 3.12207 12.875 2.61839 12.875 1.99707C12.875 1.37575 13.3787 0.87207 14 0.87207H19.4976C20.1183 0.872449 20.6222 1.37624 20.6226 1.99707L20.6255 7.49902Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-fork-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomForkIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomForkIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomForkIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M10.8745 15.9995V13.1255H8.5C6.22199 13.1255 4.37526 11.2784 4.375 9.00049V8C4.375 7.37868 4.87868 6.875 5.5 6.875C6.12132 6.875 6.625 7.37868 6.625 8V9.00049C6.62526 10.0358 7.46463 10.8755 8.5 10.8755H15.5005C16.5356 10.8752 17.3752 10.0356 17.3755 9.00049V8C17.3755 7.37868 17.8792 6.875 18.5005 6.875C19.1216 6.87526 19.6255 7.37884 19.6255 8V9.00049C19.6252 11.2783 17.7783 13.1252 15.5005 13.1255H13.1245V15.9995C13.1245 16.6208 12.6208 17.1245 11.9995 17.1245C11.3784 17.1242 10.8745 16.6207 10.8745 15.9995Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M13.3755 18.4995C13.3752 17.7403 12.7592 17.1255 12 17.1255C11.2408 17.1255 10.6248 17.7403 10.6245 18.4995C10.6245 19.2589 11.2406 19.875 12 19.875C12.7594 19.875 13.3755 19.2589 13.3755 18.4995ZM6.87451 5.50049C6.87451 4.74126 6.25966 4.12526 5.50049 4.125C4.7411 4.125 4.125 4.7411 4.125 5.50049C4.12526 6.25966 4.74077 6.875 5.5 6.875C6.259 6.87474 6.87425 6.25949 6.87451 5.50049ZM19.875 5.50049C19.875 4.7411 19.2589 4.125 18.4995 4.125C17.7403 4.12526 17.1255 4.74126 17.1255 5.50049C17.1258 6.25949 17.7405 6.87425 18.4995 6.87451C19.2587 6.87451 19.8747 6.25966 19.875 5.50049ZM15.6255 18.4995C15.6255 20.5015 14.002 22.125 12 22.125C9.99797 22.125 8.37451 20.5015 8.37451 18.4995C8.37478 16.4977 9.99813 14.8755 12 14.8755C14.0019 14.8755 15.6252 16.4977 15.6255 18.4995ZM9.12451 5.50049C9.12425 7.50213 7.50213 9.12425 5.50049 9.12451C3.49862 9.12451 1.87526 7.5023 1.875 5.50049C1.875 3.49846 3.49846 1.875 5.50049 1.875C7.5023 1.87526 9.12451 3.49862 9.12451 5.50049ZM22.125 5.50049C22.1247 7.5023 20.5014 9.12451 18.4995 9.12451C16.4979 9.12425 14.8758 7.50213 14.8755 5.50049C14.8755 3.49862 16.4977 1.87526 18.4995 1.875C20.5015 1.875 22.125 3.49846 22.125 5.50049Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-icons.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+export function CheckCircleIcon({ className }: IconProps) {
+  return (
+    <svg 
+      width="25" 
+      height="24" 
+      viewBox="0 0 25 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M12.6006 0.875C18.7443 0.875528 23.7246 5.85713 23.7246 12.001C23.7241 18.1444 18.744 23.1245 12.6006 23.125C6.45674 23.125 1.47514 18.1447 1.47461 12.001C1.47461 5.85681 6.45642 0.875 12.6006 0.875ZM17.8955 8.2041C17.4563 7.7649 16.7441 7.76518 16.3047 8.2041L11.0996 13.4092L8.89551 11.2041L8.81055 11.127C8.36882 10.7666 7.71662 10.7926 7.30469 11.2041C6.89287 11.6159 6.86633 12.2681 7.22656 12.71L7.30469 12.7949L10.3047 15.7949C10.744 16.2342 11.4562 16.2343 11.8955 15.7949L17.8955 9.79492C18.3344 9.35555 18.3347 8.6433 17.8955 8.2041Z" 
+        fill="#5EA62E"
+      />
+    </svg>
+  );
+}
+
+export function XCircleIcon({ className }: IconProps) {
+  return (
+    <svg 
+      width="25" 
+      height="24" 
+      viewBox="0 0 25 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M21.4741 12.0005C21.4741 7.09912 17.5014 3.12526 12.6001 3.125C7.69857 3.125 3.72461 7.09896 3.72461 12.0005C3.72487 16.9018 7.69873 20.8745 12.6001 20.8745C17.5012 20.8742 21.4739 16.9016 21.4741 12.0005ZM23.7241 12.0005C23.7239 18.1443 18.7439 23.1242 12.6001 23.1245C6.45609 23.1245 1.47487 18.1444 1.47461 12.0005C1.47461 5.85632 6.45593 0.875 12.6001 0.875C18.744 0.875264 23.7241 5.85648 23.7241 12.0005Z" 
+        fill="#F36666"
+      />
+      <path 
+        d="M15.3047 7.70459C15.7441 7.26549 16.4563 7.26533 16.8955 7.70459C17.3345 8.14387 17.3345 8.85613 16.8955 9.29541L14.19 11.9995L16.8955 14.7051L16.9717 14.79C17.3323 15.2319 17.3075 15.8839 16.8955 16.2959C16.4836 16.7079 15.8315 16.7327 15.3897 16.3721L15.3047 16.2959L12.5991 13.5903L9.89503 16.2959C9.45575 16.7349 8.74349 16.7349 8.30421 16.2959C7.86495 15.8566 7.86511 15.1444 8.30421 14.7051L11.0083 11.9995L8.30421 9.29541L8.22657 9.21045C7.86611 8.76858 7.8923 8.11649 8.30421 7.70459C8.71611 7.29268 9.3682 7.26649 9.81007 7.62695L9.89503 7.70459L12.5991 10.4087L15.3047 7.70459Z" 
+        fill="#F36666"
+      />
+    </svg>
+  );
+} 

package/src/components/custom-license-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomLicenseIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomLicenseIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomLicenseIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M12 1C13.3059 1 14.4141 1.83532 14.8262 3H18.5C19.0523 3 19.5 3.44772 19.5 4C19.5 4.55228 19.0523 5 18.5 5H14.8262C14.5249 5.85152 13.8515 6.5238 13 6.8252V21H18.5C19.0523 21 19.5 21.4477 19.5 22C19.5 22.5523 19.0523 23 18.5 23H5.5C4.94772 23 4.5 22.5523 4.5 22C4.5 21.4477 4.94772 21 5.5 21H11V6.8252C10.1485 6.5238 9.47513 5.85152 9.17383 5H5.5C4.94772 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94772 3 5.5 3H9.17383C9.58594 1.83532 10.6941 1 12 1ZM12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M3.67383 7.56812C4.229 6.50318 5.771 6.50317 6.32617 7.56812L6.37891 7.67847L8.91895 13.6062C8.97225 13.7306 8.99997 13.8644 9 13.9998C9 15.7352 7.69135 17.9998 5 17.9998C2.30865 17.9998 1 15.7352 1 13.9998C1.00003 13.8644 1.02775 13.7306 1.08105 13.6062L3.62109 7.67847L3.67383 7.56812ZM17.6738 7.56812C18.229 6.50317 19.771 6.50317 20.3262 7.56812L20.3789 7.67847L22.9189 13.6062C22.9723 13.7306 23 13.8644 23 13.9998C23 15.7352 21.6914 17.9998 19 17.9998C16.3086 17.9998 15 15.7352 15 13.9998C15 13.8644 15.0277 13.7306 15.0811 13.6062L17.6211 7.67847L17.6738 7.56812ZM3.00879 14.1833C3.09268 15.0659 3.77658 15.9998 5 15.9998C6.22338 15.9998 6.9063 15.0659 6.99023 14.1833L5 9.53882L3.00879 14.1833ZM17.0088 14.1833C17.0927 15.0659 17.7766 15.9998 19 15.9998C20.2234 15.9998 20.9063 15.0659 20.9902 14.1833L19 9.53882L17.0088 14.1833Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-star-icon.tsx

@@ -0,0 +1,29 @@
+interface CustomStarIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomStarIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomStarIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M9.74696 2.14709C10.7891 0.38904 13.4111 0.44767 14.348 2.32287L16.3739 6.37756L20.871 7.02356C22.9667 7.3244 23.8383 9.83383 22.4589 11.3683L22.3197 11.5133L19.0839 14.6261L19.8514 19.0441C20.2229 21.184 17.9836 22.8236 16.056 21.8229L11.9999 19.715L7.94374 21.8229C6.0162 22.824 3.77554 21.184 4.14686 19.0441L4.91298 14.6261L1.68007 11.5133C0.106241 9.99772 0.964838 7.33451 3.12733 7.02356L7.6244 6.37756L9.65174 2.32287L9.74696 2.14709ZM12.3353 3.32922C12.1972 3.05267 11.8026 3.05267 11.6644 3.32922L9.60926 7.4425C9.29773 8.066 8.69959 8.49629 8.00965 8.59533L3.44813 9.25158C3.13914 9.29594 3.01673 9.67519 3.24159 9.89172L6.52284 13.0529L6.70008 13.2462C7.0832 13.7194 7.24804 14.3388 7.14247 14.9469L6.36464 19.4293C6.31198 19.7348 6.63142 19.9691 6.90663 19.8263L11.0199 17.6891L11.2557 17.5851C11.7356 17.4056 12.2642 17.4055 12.744 17.5851L12.9784 17.6891L17.0932 19.8263C17.3682 19.9687 17.6877 19.7346 17.6351 19.4293L16.8573 14.9469C16.7366 14.2518 16.9688 13.5422 17.4769 13.0529L20.7582 9.89172C20.9827 9.67519 20.8604 9.29605 20.5516 9.25158L15.9887 8.59533C15.2991 8.49614 14.702 8.06571 14.3905 7.4425L12.3353 3.32922Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-time-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomTimeIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomTimeIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomTimeIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M10.8752 8.5C10.8752 7.87868 11.3789 7.375 12.0002 7.375C12.6216 7.375 13.1252 7.87868 13.1252 8.5V11.5337L14.7952 13.2051L14.8728 13.29C15.2331 13.7319 15.207 14.3841 14.7952 14.7959C14.3833 15.2073 13.7325 15.2322 13.2908 14.8721L13.2043 14.7959L11.2048 12.7949C10.994 12.584 10.8752 12.2978 10.8752 11.9995V8.5Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/donut-icon.tsx

@@ -0,0 +1,21 @@
+export function DonutIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M19.7949 18.2041C20.2343 18.6431 20.2352 19.3553 19.7964 19.7949C19.3575 20.2343 18.6452 20.2349 18.2056 19.7964L19.7949 18.2041ZM14.8745 12.0005C14.8745 11.5126 14.7541 11.0558 14.542 10.6558C14.0579 9.74319 13.1004 9.12518 12.0005 9.125C10.4127 9.125 9.125 10.4127 9.125 12.0005C9.12526 13.5881 10.4128 14.8745 12.0005 14.8745C13.5879 14.8742 14.8742 13.5879 14.8745 12.0005ZM19.9736 6.50586C20.5226 6.21523 21.2033 6.42435 21.4941 6.97314C21.7847 7.52205 21.5755 8.20276 21.0269 8.49365L19.9736 6.50586ZM17.1245 12.0005C17.1244 13.0089 16.8322 13.9484 16.3291 14.7412L19.7949 18.2041L18.9995 18.9995L18.2056 19.7964L14.7368 16.332C13.9449 16.8334 13.007 17.1244 12.0005 17.1245C9.17019 17.1245 6.87526 14.8307 6.875 12.0005C6.875 9.5564 8.58603 7.51213 10.8755 6.99951V2C10.8755 1.37868 11.3792 0.875 12.0005 0.875C12.6216 0.875264 13.1255 1.37884 13.1255 2V6.99951C14.2221 7.24534 15.1837 7.8436 15.8896 8.6665L19.9736 6.50586L20.4995 7.50049L21.0269 8.49365L16.9429 10.6558C17.0594 11.085 17.1245 11.5358 17.1245 12.0005Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+} 

package/src/components/edit-profile-icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface EditProfileIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+export function EditProfileIcon({ className = '', ...props }: EditProfileIconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path d="M1.875 18.0006V6.00057C1.875 3.7224 3.72183 1.87557 6 1.87557H9C9.62132 1.87557 10.125 2.37925 10.125 3.00057C10.125 3.62189 9.62132 4.12557 9 4.12557H6C4.96447 4.12557 4.125 4.96504 4.125 6.00057V18.0006C4.125 19.0361 4.96447 19.8756 6 19.8756H18C19.0355 19.8756 19.875 19.0361 19.875 18.0006V15.0006C19.875 14.3793 20.3787 13.8756 21 13.8756C21.6213 13.8756 22.125 14.3793 22.125 15.0006V18.0006C22.125 20.2787 20.2782 22.1256 18 22.1256H6C3.72183 22.1256 1.875 20.2787 1.875 18.0006Z" fill="#FAFAFA"/>
+      <path d="M14.8315 3.8326C15.2436 3.42057 15.8955 3.39414 16.3374 3.75497L16.4224 3.8326L20.1724 7.5826L20.25 7.66757C20.6101 8.10943 20.5841 8.76166 20.1724 9.17342C19.7604 9.58528 19.1083 9.61027 18.6665 9.2496L18.5815 9.17342L14.8315 5.42343L14.7539 5.337C14.3938 4.89519 14.4199 4.24439 14.8315 3.8326Z" fill="#FAFAFA"/>
+      <path d="M17.1024 1.57923C18.3298 0.57828 20.1405 0.650507 21.2845 1.79457L22.2059 2.71595L22.4213 2.95326C23.4221 4.18067 23.35 5.99135 22.2059 7.13539L13.8109 15.5319C13.2789 16.0639 12.6125 16.4387 11.8861 16.6188L11.5712 16.6832L9.40026 17.0451C7.96242 17.2843 6.71613 16.0381 6.95544 14.6002L7.31725 12.4293C7.45859 11.5813 7.86069 10.7975 8.46862 10.1896L16.8651 1.79457L17.1024 1.57923ZM19.6937 3.38539C19.3948 3.0865 18.9332 3.04861 18.5936 3.27259L18.4559 3.38539L10.0609 11.7819C9.78466 12.0581 9.60079 12.4131 9.53649 12.7985L9.20251 14.7965L11.202 14.464C11.5874 14.3997 11.9424 14.2158 12.2186 13.9396L20.6151 5.54457C20.914 5.24571 20.9518 4.78406 20.7279 4.44447L20.6151 4.30677L19.6937 3.38539Z" fill="#FAFAFA"/>
+    </svg>
+  );
+} 

package/src/components/elestio-logo.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+/**
+ * Official Elestio logo with unique IDs to prevent gradient/clip-path collisions
+ * when the same SVG is rendered multiple times on the page.
+ */
+export const ElestioLogo = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => {
+  // Generate unique ID suffix to avoid ID collisions between instances
+  const uniqueId = React.useId();
+
+  return (
+    <svg
+      {...props}
+      className={className}
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id={`mask0_${uniqueId}`}
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="2"
+        y="2"
+        width="21"
+        height="20"
+      >
+        <path
+          d="M15.0429 16.9829C14.2182 17.3609 13.256 17.6014 12.2251 17.6014C9.95706 17.6014 7.96393 16.1924 7.27664 13.9932H21.8471C21.9502 13.2715 22.0876 12.5842 22.0876 11.8626C22.0876 6.60479 17.8264 2 12.4657 2C6.8299 2 2.5 6.57045 2.5 12.1375C2.5 17.6014 6.933 22 12.3969 22C14.8368 22 17.2423 21.0034 18.9949 19.4227L15.0429 16.9829ZM12.4313 6.433C14.7337 6.433 16.7955 7.77325 17.5515 10.0413H7.20791C7.8952 7.84192 10.1976 6.433 12.4313 6.433Z"
+          fill="black"
+        />
+      </mask>
+      <g mask={`url(#mask0_${uniqueId})`}>
+        <path d="M18.9942 8.73535H6.62305V14.9209H18.9942V8.73535Z" fill="#A91A1F" />
+        <path d="M12.4211 6.4445C12.5622 6.4445 12.7034 6.4445 12.8092 6.47969L7.87043 2.89355C7.34128 3.13966 6.8474 3.45608 6.3888 3.80766C3.21389 6.12808 1.73227 9.89003 2.26142 13.5465L7.65454 9.76642C8.50118 7.69204 10.1976 6.4445 12.4211 6.4445Z" fill={`url(#paint0_linear_${uniqueId})`} />
+        <path d="M6.96148 12.031C6.96148 11.2385 7.18239 10.4837 7.48272 9.7666C5.86846 10.9366 3.7705 12.4462 2.15625 13.6162C2.23133 14.2201 2.3815 14.8239 2.5692 15.4277C3.84559 19.4283 7.22426 22.1835 11.091 22.825C11.0159 22.5986 10.0398 19.617 9.1013 16.5978C7.78738 15.541 6.96148 13.8804 6.96148 12.031Z" fill={`url(#paint1_linear_${uniqueId})`} />
+        <path d="M15.3086 16.7828C14.4586 17.3044 13.4314 17.6174 12.3335 17.6174C10.9523 17.6174 9.67724 17.1305 8.68555 16.2959L10.5627 21.9987C11.1293 22.1031 11.696 22.1379 12.2981 22.1379C16.2648 22.1379 19.665 19.9471 21.4004 16.748H15.3086V16.7828Z" fill={`url(#paint2_linear_${uniqueId})`} />
+        <path d="M17.6157 10.5868L19.4371 4.9167C19.0591 4.50436 18.6123 4.1607 18.1656 3.81706C15.0728 1.54901 11.0865 1.34283 7.89062 2.92358L12.7016 6.42873C15.1072 6.63496 17.0659 8.31877 17.6157 10.5868Z" fill={`url(#paint3_linear_${uniqueId})`} />
+        <path d="M19.8927 3.37793L17.3451 9.61093C17.4894 10.0644 17.5855 10.5554 17.5855 11.0466C17.5855 13.1998 16.1435 15.0887 13.9805 16.1463H22.296C22.6804 15.6174 22.969 15.013 23.2092 14.4464C24.7954 10.4043 23.3535 6.17334 19.8927 3.37793Z" fill={`url(#paint4_linear_${uniqueId})`} />
+      </g>
+      <defs>
+        <linearGradient id={`paint0_linear_${uniqueId}`} x1="7.48507" y1="13.5074" x2="7.48507" y2="2.88726" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#EC5A22" />
+          <stop offset="1" stopColor="#F5A11A" />
+        </linearGradient>
+        <linearGradient id={`paint1_linear_${uniqueId}`} x1="6.63337" y1="22.84" x2="6.63337" y2="9.77508" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#BF161C" />
+          <stop offset="1" stopColor="#E81C24" />
+        </linearGradient>
+        <linearGradient id={`paint2_linear_${uniqueId}`} x1="15.0856" y1="22.1907" x2="15.0856" y2="16.3259" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#8C278A" />
+          <stop offset="1" stopColor="#A567A5" />
+        </linearGradient>
+        <linearGradient id={`paint3_linear_${uniqueId}`} x1="13.6735" y1="10.598" x2="13.6735" y2="1.92347" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#F28E1E" />
+          <stop offset="1" stopColor="#FFC605" />
+        </linearGradient>
+        <linearGradient id={`paint4_linear_${uniqueId}`} x1="18.8642" y1="16.1243" x2="18.8642" y2="3.36255" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#00A9EA" />
+          <stop offset="1" stopColor="#6DCAF1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}; 

package/src/components/empty-vendor-icon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface EmptyVendorIconProps {
+  className?: string;
+}
+
+export function EmptyVendorIcon({ className }: EmptyVendorIconProps) {
+  return (
+    <svg 
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={className}
+    >
+      <path 
+        d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" 
+        fill="url(#pattern0_1643_33816)"
+      />
+      <defs>
+        <pattern 
+          id="pattern0_1643_33816" 
+          patternContentUnits="objectBoundingBox" 
+          width="1" 
+          height="1"
+        >
+          <use 
+            xlinkHref="#image0_1643_33816" 
+            transform="scale(0.0104167)"
+          />
+        </pattern>
+        <image 
+          id="image0_1643_33816" 
+          width="96" 
+          height="96" 
+          preserveAspectRatio="none" 
+          xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANKSURBVHgB7Z2JbiIxEETNfSPB/38j4hI37G5FQjuJGBjwUe5JPWkUKaCI+Hna7XZP0vjzDydoNJ2gIgFkJICMBJCRADISQEYCyEgAGQkgIwFkJICMBJCRADISQEYCyLSdJ+fz2S0WC2f5WKHRaLjRaOTG47FLjfcdsFwuTQ8+wOffbreU38NbwPV6dXUBd3NqtAaQkQAyEkDGOwsqYzAYULKKVxwOB7fZbFwuRBPQarW+rtxoNvO66RWCyEgAGQkgIwFkoi3Cr8AOmrGLvlwuH732k1BJBkXAer12u93O5QY+1ztMp1M3HA6dD8lDEOotOQ7+J6CA50tyAXXqhr/dbs4XLcJkJICMBJChpaGPmEwmrtPpuNxAAS9W4pCVAAx+t9t1uRFzv6IQREYCyEgAGQkgk9UiXAUUzFDOwMlWu93O8tTtHcwIQAkDTWDH4/Hb93HunOPZc1XMhCBUKn8OPkBBzHJxz4QA5OH7/b709RBVSRYmBJxOp6evoypptUWyNllQbu0mVTHxqXu93lcLeRkoYTx7PWeiZUGI2Y9CxycHMpjdyHTKOtpwNGiVaAJCH7rjAQqIwIJ7/7ko3EFMjhXUqpjaiKHfFBcEQIbVsFPE3E4YWN/9FvFehOswC5l4C0BIEJ/jHYKQgWAxrJrd1KkvKARB1oB+v1/5vYjfEvAfnQeQkQAyEkBGAshIABkJIJNVKQKFtnfKDKgHoZ3RMlkJeHXy9YgUAkI8B1CGyWJcCrCzx4YRO/dHzQChkIACuAOLVwqSC8ipeopZjtZzDDa+Mh6fSi4AiywksJ4VQ2cdQgquVLP8GckFIHOZzWZv9fL4HG9C9D2OI6aHFB+iI4+yBqB8PZ/PK78fB/yr1ary+yELIQWDjsEPOejoR0WXBq4QD5PUZhFGOMGAY+BDNgMgXOLQHwOOh7JDr2HmBeBPZoae5VincMaBQY/dc2ReQKiFFOEEA46BT3no/2v3AZjVCCn38MJKj3+VAMzy4pUDtRaAWY2QgsHG1xxbaGonIHSaGBvzAmKnibEx25qYKk2MjQkBGGBWmhibhv6fMBedCZORADISQEYCyEgAGQkgIwFkJICMBJCRADISQEYCyEgAGQkgIwFk/gLUSDIjX8qP4wAAAABJRU5ErkJggg=="
+        />
+      </defs>
+    </svg>
+  );
+} 

package/src/components/features/auth-providers-list.tsx

@@ -62,7 +62,7 @@ export function AuthProvidersList({
           .map((provider) => (
             <ProviderButton
               key={provider.provider}
-              provider={provider.provider as 'microsoft' | 'google' | 'slack' | 'github'}
+              provider={provider.provider as 'microsoft' | 'google' | 'slack' | 'github' | 'apple'}
               onClick={() => handleProviderClick(provider.provider)}
               disabled={loading}
               loading={loading}

package/src/components/features/platform-badge.tsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 import { cn } from '../../utils/cn';
-import { FlamingoLogo } from '../icons/flamingo-logo';
-import { OpenmspLogo } from '../icons/openmsp-logo';
+import { FlamingoLogo } from '../flamingo-logo';
+import { OpenmspLogo } from '../openmsp-logo';
 import { OpenFrameLogo } from '../icons/openframe-logo';
 import { MiamiCyberGangLogoFaceOnly } from '../icons/miami-cyber-gang-logo-face-only';
 import { Globe } from 'lucide-react';

package/src/components/features/provider-button.tsx

@@ -2,10 +2,10 @@
 
 import { useState } from 'react';
 import { Button } from "../ui/button";
-import { MicrosoftIcon, GoogleLogo, SlackIcon, GitHubIcon } from "../icons";
+import { MicrosoftIcon, GoogleLogo, SlackIcon, GitHubIcon, AppleIcon } from "../icons";
 
 interface ProviderButtonProps {
-  provider: 'microsoft' | 'google' | 'slack' | 'github';
+  provider: 'microsoft' | 'google' | 'slack' | 'github' | 'apple';
   onClick: () => Promise<void> | void;
   disabled?: boolean;
   loading?: boolean;
@@ -28,6 +28,10 @@ const PROVIDER_CONFIG = {
     displayName: 'Continue with GitHub',
     icon: GitHubIcon,
   },
+  apple: {
+    displayName: 'Continue with Apple',
+    icon: AppleIcon,
+  },
 };
 
 export function ProviderButton({ provider, onClick, disabled = false, loading = false }: ProviderButtonProps) {

package/src/components/flamingo-logo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface FlamingoLogoProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+  size?: number;
+  color?: string;
+}
+
+export function FlamingoLogo({ className = '', color="var(--ods-flamingo-pink-base)" ,size=120, ...props }: FlamingoLogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size} 
+      viewBox="0 0 121 120" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M20.8645 77.9756C20.6306 78.095 20.3452 77.9582 20.3369 77.7002C20.2055 73.6173 23.4398 62.2314 27.7657 59.0452C31.477 45.9806 61.8811 24.0208 81.7715 48.2044C83.1662 49.7884 84.0264 52.0978 84.7512 54.0436C86.0615 57.5613 86.9291 59.8908 89.7117 54.5977C92.4782 49.335 87.2725 42.2381 81.701 34.6426C75.7955 26.5918 69.4791 17.9808 71.8102 10.4001C75.4609 -1.47146 91.9849 -4.33245 94.5422 7.89834C98.4226 10.7002 104.422 17.0815 96.2751 25.8554C96.0466 26.1014 95.6263 25.9453 95.6104 25.6132C95.417 21.5769 93.9498 16.1177 90.5641 14.5697C89.0187 13.8632 88.0307 13.6723 87.1405 13.5003C85.585 13.1998 84.3282 12.9569 80.919 10.1221C75.236 5.39658 75.236 20.1291 87.7386 32.3599C97.1156 41.533 106.493 66.2324 84.0287 70.9981C74.9174 72.9311 68.0892 72.0015 61.3076 71.0782C61.0953 71.0493 60.8831 71.0204 60.6708 70.9916V89.3274L66.3745 91.8104C67.0914 92.1225 67.4139 92.944 67.0949 93.6453C66.7759 94.3466 65.9362 94.6621 65.2193 94.35L60.6708 92.37V118.61C60.6708 119.378 60.0347 120 59.2501 120C58.4654 120 57.8293 119.378 57.8293 118.61V91.133L42.4873 84.4542C42.0611 84.2686 41.7551 83.8902 41.6687 83.4417C41.5824 82.9931 41.7266 82.5317 42.0546 82.2072L54.1527 70.2377C45.537 69.536 35.8193 70.3474 20.8645 77.9756ZM57.7692 70.613L45.5202 82.732L57.8293 88.0905V70.6204C57.8093 70.618 57.7893 70.6155 57.7692 70.613Z" 
+        fill={color}
+      />
+    </svg>
+  );
+} 

package/src/components/form.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import type * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "../utils/cn"
+import { Label } from "./ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId()
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    )
+  },
+)
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    )
+  },
+)
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField()
+
+    return <p ref={ref} id={formDescriptionId} className={cn("text-h6 text-muted-foreground", className)} {...props} />
+  },
+)
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField()
+    const body = error ? String(error?.message) : children
+
+    if (!body) {
+      return null
+    }
+
+    return (
+      <p ref={ref} id={formMessageId} className={cn("text-h6 text-destructive", className)} {...props}>
+        {body}
+      </p>
+    )
+  },
+)
+FormMessage.displayName = "FormMessage"
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }

package/src/components/github-icon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface GitHubIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const GitHubIcon: React.FC<GitHubIconProps> = ({ 
+  className = "", 
+  width = 15, 
+  height = 14 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 15 14" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M7.18173 0.333008C3.40523 0.333008 0.346436 3.3918 0.346436 7.1683C0.346436 10.1929 2.30304 12.7476 5.02007 13.6533C5.36183 13.7131 5.48999 13.508 5.48999 13.3286C5.48999 13.1663 5.48145 12.628 5.48145 12.0555C3.76408 12.3717 3.31979 11.6369 3.18308 11.2524C3.10618 11.0559 2.77296 10.4492 2.48246 10.2869C2.24323 10.1587 1.90146 9.84261 2.47392 9.83406C3.0122 9.82552 3.39668 10.3296 3.52485 10.5347C4.14002 11.5685 5.1226 11.278 5.51563 11.0986C5.57543 10.6543 5.75486 10.3553 5.95137 10.1844C4.43052 10.0135 2.84132 9.42395 2.84132 6.80945C2.84132 6.06611 3.10618 5.45093 3.54193 4.97246C3.47358 4.80158 3.23435 4.10096 3.61029 3.16111C3.61029 3.16111 4.18274 2.98168 5.48999 3.86173C6.03682 3.70793 6.61782 3.63104 7.19882 3.63104C7.77982 3.63104 8.36082 3.70793 8.90764 3.86173C10.2149 2.97314 10.7873 3.16111 10.7873 3.16111C11.1633 4.10096 10.9241 4.80158 10.8557 4.97246C11.2914 5.45093 11.5563 6.05757 11.5563 6.80945C11.5563 9.43249 9.95856 10.0135 8.43771 10.1844C8.68549 10.398 8.8991 10.8081 8.8991 11.4489C8.8991 12.3631 8.89055 13.0979 8.89055 13.3286C8.89055 13.508 9.01871 13.7216 9.36048 13.6533C10.7174 13.1952 11.8965 12.3231 12.7318 11.1597C13.5671 9.99643 14.0166 8.60046 14.017 7.1683C14.017 3.3918 10.9582 0.333008 7.18173 0.333008Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/google-logo.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const GoogleLogo = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    className={className}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EB4335"
+      />
+    </g>
+  </svg>
+);