feat(dashboard): Pub Api Key domain (#6162)

**What**
- Adds Pub. Api Key domain

**Note**
- Pagination for sales channels associated with the pubkey is not implemented correctly as it is not supported by the API. Will open a separate issue on this, and revisit the impl. once fixed.

CLOSES CORE-1656

packages/design-system/ui/src/components/avatar/avatar.tsx

@@ -14,18 +14,24 @@ const avatarVariants = cva({
       rounded: "rounded-full",
     },
     size: {
-      xsmall: "h-5 w-5",
-      small: "h-6 w-6",
+      "2xsmall": "h-5 w-5",
+      xsmall: "h-6 w-6",
+      small: "h-7 w-7",
       base: "h-8 w-8",
       large: "h-10 w-10",
       xlarge: "h-12 w-12",
     },
   },
   compoundVariants: [
+    {
+      variant: "squared",
+      size: "2xsmall",
+      className: "rounded-md",
+    },
     {
       variant: "squared",
       size: "xsmall",
-      className: "rounded-[4px]",
+      className: "rounded-md",
     },
     {
       variant: "squared",
@@ -62,14 +68,20 @@ const innerVariants = cva({
       rounded: "rounded-full",
     },
     size: {
-      xsmall: "txt-compact-xsmall-plus h-4 w-4",
-      small: "txt-compact-xsmall-plus h-5 w-5",
+      "2xsmall": "txt-compact-xsmall-plus h-4 w-4",
+      xsmall: "txt-compact-xsmall-plus h-5 w-5",
+      small: "txt-compact-small-plus h-6 w-6",
       base: "txt-compact-small-plus h-7 w-7",
       large: "txt-compact-medium-plus h-9 w-9",
       xlarge: "txt-compact-large-plus h-11 w-11",
     },
   },
   compoundVariants: [
+    {
+      variant: "squared",
+      size: "2xsmall",
+      className: "rounded-sm",
+    },
     {
       variant: "squared",
       size: "xsmall",

packages/design-system/ui/src/components/copy/copy.tsx

@@ -2,77 +2,115 @@
 
 import { Tooltip } from "@/components/tooltip"
 import { clx } from "@/utils/clx"
-import { CheckCircleSolid, SquareTwoStack } from "@medusajs/icons"
+import {
+  CheckCircleMiniSolid,
+  CheckCircleSolid,
+  SquareTwoStack,
+  SquareTwoStackMini,
+} from "@medusajs/icons"
 import { Slot } from "@radix-ui/react-slot"
 import copy from "copy-to-clipboard"
 import React, { useState } from "react"
 
 type CopyProps = React.HTMLAttributes<HTMLButtonElement> & {
   content: string
+  variant?: "mini" | "default" | null
   asChild?: boolean
 }
 
 /**
  * This component is based on the `button` element and supports all of its props
  */
-const Copy = React.forwardRef<
-  HTMLButtonElement,
-  CopyProps
->(({ 
-    children, 
-    className, 
-    /**
-     * The content to copy.
-     */
-    content, 
-    /**
-     * Whether to remove the wrapper `button` element and use the
-     * passed child element instead.
-     */
-    asChild = false, 
-    ...props
-  }: CopyProps, ref) => {
-  const [done, setDone] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [text, setText] = useState("Copy")
+const Copy = React.forwardRef<HTMLButtonElement, CopyProps>(
+  (
+    {
+      children,
+      className,
+      /**
+       * The content to copy.
+       */
+      content,
+      /**
+       * The variant of the copy button.
+       */
+      variant = "default",
+      /**
+       * Whether to remove the wrapper `button` element and use the
+       * passed child element instead.
+       */
+      asChild = false,
+      ...props
+    }: CopyProps,
+    ref
+  ) => {
+    const [done, setDone] = useState(false)
+    const [open, setOpen] = useState(false)
+    const [text, setText] = useState("Copy")
 
-  const copyToClipboard = () => {
-    setDone(true)
-    copy(content)
+    const copyToClipboard = (
+      e:
+        | React.MouseEvent<HTMLElement, MouseEvent>
+        | React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      e.stopPropagation()
 
-    setTimeout(() => {
-      setDone(false)
-    }, 2000)
-  }
+      setDone(true)
+      copy(content)
 
-  React.useEffect(() => {
-    if (done) {
-      setText("Copied")
-      return
+      setTimeout(() => {
+        setDone(false)
+      }, 2000)
     }
 
-    setTimeout(() => {
-      setText("Copy")
-    }, 500)
-  }, [done])
+    React.useEffect(() => {
+      if (done) {
+        setText("Copied")
+        return
+      }
 
-  const Component = asChild ? Slot : "button"
+      setTimeout(() => {
+        setText("Copy")
+      }, 500)
+    }, [done])
 
-  return (
-    <Tooltip content={text} open={done || open} onOpenChange={setOpen}>
-      <Component
-        ref={ref}
-        aria-label="Copy code snippet"
-        type="button"
-        className={clx("text-ui-code-icon h-fit w-fit", className)}
-        onClick={copyToClipboard}
-        {...props}
-      >
-        {children ? children : done ? <CheckCircleSolid /> : <SquareTwoStack />}
-      </Component>
-    </Tooltip>
-  )
-})
+    const isDefaultVariant = (
+      variant?: string | null
+    ): variant is "default" => {
+      return variant === "default"
+    }
+
+    const isDefault = isDefaultVariant(variant)
+
+    const Component = asChild ? Slot : "button"
+
+    return (
+      <Tooltip content={text} open={done || open} onOpenChange={setOpen}>
+        <Component
+          ref={ref}
+          aria-label="Copy code snippet"
+          type="button"
+          className={clx("text-ui-code-icon h-fit w-fit", className)}
+          onClick={copyToClipboard}
+          {...props}
+        >
+          {children ? (
+            children
+          ) : done ? (
+            isDefault ? (
+              <CheckCircleSolid />
+            ) : (
+              <CheckCircleMiniSolid />
+            )
+          ) : isDefault ? (
+            <SquareTwoStack />
+          ) : (
+            <SquareTwoStackMini />
+          )}
+        </Component>
+      </Tooltip>
+    )
+  }
+)
 Copy.displayName = "Copy"
 
 export { Copy }

packages/design-system/ui/src/components/status-badge/status-badge.tsx

@@ -1,11 +1,28 @@
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
+import { VariantProps, cva } from "cva"
+
+const statusBadgeVariants = cva({
+  base: "flex items-center justify-center w-5 h-[18px] [&_div]:w-2 [&_div]:h-2 [&_div]:rounded-sm",
+  variants: {
+    color: {
+      green: "[&_div]:bg-ui-tag-green-icon",
+      red: "[&_div]:bg-ui-tag-red-icon",
+      orange: "[&_div]:bg-ui-tag-orange-icon",
+      blue: "[&_div]:bg-ui-tag-blue-icon",
+      purple: "[&_div]:bg-ui-tag-purple-icon",
+      grey: "[&_div]:bg-ui-tag-neutral-icon",
+    },
+  },
+  defaultVariants: {
+    color: "grey",
+  },
+})
 
 interface StatusBadgeProps
-  extends Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
-  color?: "green" | "red" | "blue" | "orange" | "grey" | "purple"
-}
+  extends Omit<React.ComponentPropsWithoutRef<"span">, "color">,
+    VariantProps<typeof statusBadgeVariants> {}
 
 /**
  * This component is based on the span element and supports all of its props
@@ -27,31 +44,14 @@ const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
       <span
         ref={ref}
         className={clx(
-          "bg-ui-bg-base border-ui-border-base txt-compact-small text-ui-fg-base inline-flex items-center justify-center rounded-full border py-[3px] pl-1 pr-2.5",
+          "txt-compact-xsmall-plus bg-ui-bg-subtle text-ui-fg-subtle border-ui-border-base box-border flex w-fit select-none items-center overflow-hidden rounded-md border pl-0 pr-1 leading-none",
           className
         )}
         {...props}
       >
-        <span
-          role="presentation"
-          className="mr-0.5 flex h-5 w-5 items-center justify-center"
-        >
-          <span
-            role="presentation"
-            className="bg-ui-bg-base shadow-borders-base flex h-2.5 w-2.5 items-center justify-center rounded-full"
-          >
-            <span
-              className={clx("h-1.5 w-1.5 rounded-full", {
-                "bg-ui-tag-neutral-icon": color === "grey",
-                "bg-ui-tag-green-icon": color === "green",
-                "bg-ui-tag-red-icon": color === "red",
-                "bg-ui-tag-orange-icon": color === "orange",
-                "bg-ui-tag-blue-icon": color === "blue",
-                "bg-ui-tag-purple-icon": color === "purple",
-              })}
-            />
-          </span>
-        </span>
+        <div role="presentation" className={statusBadgeVariants({ color })}>
+          <div />
+        </div>
         {children}
       </span>
     )