export default {
  name: "External Link",
  acceptsChildren: true,
  category: "Basic",
  props: [
    {
      label: "Link",
      name: "href",
      type: { kind: "text", isDynamic: true },
      isDefault: true,
      default: "",
      placeholder: "enter in a url",
      help: "The page the link will go to",
    },
    {
      label: "Open in a new tab",
      name: "newTab",
      type: { kind: "boolean", isDynamic: true },
      isDefault: true,
      default: false,
      placeholder: "Should the link open in a new tab",
      help: "Should the link open in a new tab",
    },
  ],
  events: [
    {
      label: "When clicked",
      name: "onClick",
      help: "Select an action to run when container is clicked",
    },
  ],
  defaultStyles: {
    ":focus-within": {
      "outline-width": "3px",
      "outline-color": "#7DADD9",
      "outline-style": "solid",
    },
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
    },
  },
  sources: [],
} as const;