Software Atlassian Entities

Atlassian

Preview
Usage
Definition

import { Atlassian } from '@dinghy/diagrams/entitiesAtlassian'

<Atlassian/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ATLASSIAN } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ATLASSIAN)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Atlassian_Logo.svg;strokeColor=none;',
  },
  _original_width: 66,
  _original_height: 66,

}

Avatar (Available)

Preview
Usage
Definition

import { AvatarAvailable } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarAvailable/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_AVAILABLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_AVAILABLE)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#6554C0;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=17;fontStyle=1;html=1;sketch=0;',
  },
  _width: 0,
  _height: 32,
}

Avatar (Away)

Preview
Usage
Definition

import { AvatarAway } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarAway/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_AWAY } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_AWAY)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#FFAB00;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=17;fontStyle=1;html=1;sketch=0;',
  },
  _width: 0,
  _height: 32,
}

Avatar (Do not disturb)

Preview
Usage
Definition

import { AvatarDoNotDisturb } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarDoNotDisturb/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_DO_NOT_DISTURB } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_DO_NOT_DISTURB)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#0065FF;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=17;fontStyle=1;html=1;sketch=0;',
  },
  _width: 0,
  _height: 32,
}

Avatar (Large)

Preview
Usage
Definition

import { AvatarLarge } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarLarge/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_LARGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_LARGE)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#6554C0;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=46;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 96,
  _original_height: 96,

}

Avatar (Main)

Preview
Usage
Definition

import { AvatarMain } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarMain/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_MAIN } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_MAIN)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#0065FF;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=25;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 48,
  _original_height: 48,

}

Avatar (Normal)

Preview
Usage
Definition

import { AvatarNormal } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarNormal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_NORMAL } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_NORMAL)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#36B37E;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=17;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 32,
  _original_height: 32,

}

Avatar (Small)

Preview
Usage
Definition

import { AvatarSmall } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarSmall/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_SMALL } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_SMALL)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#FFAB00;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 24,
  _original_height: 24,

}

Avatar (Tiny)

Preview
Usage
Definition

import { AvatarTiny } from '@dinghy/diagrams/entitiesAtlassian'

<AvatarTiny/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AVATAR_TINY } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, AVATAR_TINY)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#FF5630;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 16,
  _original_height: 16,

}

Bamboo

Preview
Usage
Definition

import { Bamboo } from '@dinghy/diagrams/entitiesAtlassian'

<Bamboo/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BAMBOO } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BAMBOO)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Bamboo_Logo.svg;strokeColor=none;',
  },
  _original_width: 64,
  _original_height: 74,

}

Preview
Usage
Definition

import { Banner } from '@dinghy/diagrams/entitiesAtlassian'

<Banner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BANNER } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BANNER)}
  />

{
  _style: {
    entity: 'rounded=0;fillColor=#FFAB00;strokeColor=none;html=1',
  },
  _width: 0,
  _height: 50,
}

Preview
Usage
Definition

import { Banner2 } from '@dinghy/diagrams/entitiesAtlassian'

<Banner2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BANNER_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BANNER_2)}
  />

{
  _style: {
    entity: 'rounded=0;fillColor=#DE350A;strokeColor=none;html=1',
  },
  _width: 0,
  _height: 50,
}

Bitbucket

Preview
Usage
Definition

import { Bitbucket } from '@dinghy/diagrams/entitiesAtlassian'

<Bitbucket/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BITBUCKET } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BITBUCKET)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Bitbucket_Logo.svg;strokeColor=none;',
  },
  _original_width: 57,
  _original_height: 50,

}

Bold Badge

Preview
Usage
Definition

import { BoldBadge } from '@dinghy/diagrams/entitiesAtlassian'

<BoldBadge/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BOLD_BADGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BOLD_BADGE)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#0065FF;strokeColor=none;html=1;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=18;fontStyle=1;arcSize=50;sketch=0;',
  },
  _width: 40,
  _height: 25,
}

Bold toggle disabled

Preview
Usage
Definition

import { BoldToggleDisabled } from '@dinghy/diagrams/entitiesAtlassian'

<BoldToggleDisabled/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BOLD_TOGGLE_DISABLED } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BOLD_TOGGLE_DISABLED)}
  />

{
  _style: {
    entity: 'fillColor=#F1F2F4;strokeColor=none;rounded=1;arcSize=50;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 110,
  _height: 20,
}

Preview
Usage
Definition

import { BoldToggleWithTooltip } from '@dinghy/diagrams/entitiesAtlassian'

<BoldToggleWithTooltip/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BOLD_TOGGLE_WITH_TOOLTIP } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BOLD_TOGGLE_WITH_TOOLTIP)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=10;fillColor=#172B4D;strokeColor=none;html=1;fontSize=11;align=center;fontColor=#ffffff;fontStyle=0;fontSize=11;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 112,
}

Preview
Usage
Definition

import { BoldToggleWithTooltip2 } from '@dinghy/diagrams/entitiesAtlassian'

<BoldToggleWithTooltip2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BOLD_TOGGLE_WITH_TOOLTIP_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BOLD_TOGGLE_WITH_TOOLTIP_2)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;align=left;fontColor=#596780;fontStyle=0;fontSize=11;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 3,
  _height: 112,
}

Preview
Usage
Definition

import { BoldToggleWithTooltip3 } from '@dinghy/diagrams/entitiesAtlassian'

<BoldToggleWithTooltip3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BOLD_TOGGLE_WITH_TOOLTIP_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BOLD_TOGGLE_WITH_TOOLTIP_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F0F2F5;strokeColor=#D8DCE3;fontColor=#000000;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;labelPosition=right;verticalLabelPosition=middle;spacingLeft=10;html=1;shadow=0;dashed=0;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 4,
  _height: 112,
}

Preview
Usage
Definition

import { Breadcrumb } from '@dinghy/diagrams/entitiesAtlassian'

<Breadcrumb/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BREADCRUMB } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BREADCRUMB)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontColor=#596780;align=left;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=0',
  },
  _width: 360,
  _height: 25,
}

Button (avatar)

Preview
Usage
Definition

import { ButtonAvatar } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonAvatar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_AVATAR } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_AVATAR)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=none;strokeColor=none;html=1;fontColor=#596780;align=left;fontSize=11;spacingLeft=10;fontSize=11',
  },
  _width: 160,
  _height: 167,
}

Button (avatar) 2

Preview
Usage
Definition

import { ButtonAvatar2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonAvatar2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_AVATAR_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_AVATAR_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#253858;strokeColor=none;html=1;',
  },
  _width: 1,
  _height: 167,
}

Button (avatar) 3

Preview
Usage
Definition

import { ButtonAvatar3 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonAvatar3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_AVATAR_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_AVATAR_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;html=1;arcSize=4',
  },
  _width: 2,
  _height: 167,
}

Button (compact)

Preview
Usage
Definition

import { ButtonCompact } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonCompact/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_COMPACT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_COMPACT)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;align=center;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#596780;fontSize=12;sketch=0;',
  },
  _width: 0,
  _height: 33,
}

Button (compact) 2

Preview
Usage
Definition

import { ButtonCompact2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonCompact2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_COMPACT_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_COMPACT_2)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#596780;strokeColor=none;html=1;sketch=0;',
  },
  _width: 1,
  _height: 33,
}

Button (disabled)

Preview
Usage
Definition

import { ButtonDisabled } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonDisabled/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DISABLED } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_DISABLED)}
  />

{
  _style: {
    entity: 'rounded=1;align=center;fillColor=#F1F2F4;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#A5ADBA;fontSize=12',
  },
  _width: 0,
  _height: 33,
}

Preview
Usage
Definition

import { ButtonDropdownOpen } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonDropdownOpen/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DROPDOWN_OPEN } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_DROPDOWN_OPEN)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#253858;strokeColor=none;html=1;fontColor=#ffffff;align=left;fontSize=12;spacingLeft=10;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 200,
}

Preview
Usage
Definition

import { ButtonDropdownOpen2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonDropdownOpen2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DROPDOWN_OPEN_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_DROPDOWN_OPEN_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;html=1;arcSize=4;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 2,
  _height: 200,
}

Preview
Usage
Definition

import { ButtonDropdown } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonDropdown/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DROPDOWN } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_DROPDOWN)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#596780;align=left;fontSize=12;spacingLeft=10;sketch=0;',
  },
  _width: 0,
  _height: 33,
}

Preview
Usage
Definition

import { ButtonDropdown2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonDropdown2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DROPDOWN_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_DROPDOWN_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=none;strokeColor=none;html=1;fontColor=#596780;align=left;fontSize=11;spacingLeft=10;fontSize=11;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 100,
  _height: 53,
}

Preview
Usage
Definition

import { ButtonDropdown3 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonDropdown3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DROPDOWN_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_DROPDOWN_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;strokeColor=none;html=1;fontColor=#596780;align=left;fontSize=12;spacingLeft=10;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 53,
}

Button (grouped, responsive)

Preview
Usage
Definition

import { ButtonGroupedResponsive } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonGroupedResponsive/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUPED_RESPONSIVE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_GROUPED_RESPONSIVE)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.rrect;rSize=10;fillColor=#42526E;strokeColor=#ffffff;strokeWidth=2;fontSize=12;fontColor=#ffffff;fontStyle=0;whiteSpace=wrap;',
  },
  _width: 3,
  _height: 104,
}

Button (grouped)

Preview
Usage
Definition

import { ButtonGrouped } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonGrouped/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUPED } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_GROUPED)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.rrect;rSize=10;fillColor=#F1F2F4;strokeColor=#ffffff;strokeWidth=2',
  },
  _width: 320,
  _height: 33,
}

Button (grouped) 2

Preview
Usage
Definition

import { ButtonGrouped2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonGrouped2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUPED_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_GROUPED_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#0065FF;align=center;strokeColor=none;html=1;fontColor=#ffffff;fontSize=12;whiteSpace=wrap;',
  },
  _width: 556,
  _height: 33,
}

Button (grouped) 3

Preview
Usage
Definition

import { ButtonGrouped3 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonGrouped3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUPED_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_GROUPED_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;align=center;strokeColor=none;html=1;fontColor=#596780;fontSize=12;whiteSpace=wrap;',
  },
  _width: 1,
  _height: 33,
}

Button (grouped) 4

Preview
Usage
Definition

import { ButtonGrouped4 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonGrouped4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUPED_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_GROUPED_4)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;align=center;strokeColor=none;html=1;fontColor=#596780;fontSize=12',
  },
  _width: 4,
  _height: 33,
}

Button (icon and label)

Preview
Usage
Definition

import { ButtonIconAndLabel } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonIconAndLabel/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_ICON_AND_LABEL } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_ICON_AND_LABEL)}
  />

{
  _style: {
    entity: 'rounded=1;align=left;fillColor=#F1F2F4;strokeColor=none;html=1;fontColor=#596780;fontSize=12;spacingLeft=26;',
  },
  _width: 0,
  _height: 33,
}

Button (label only)

Preview
Usage
Definition

import { ButtonLabelOnly } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonLabelOnly/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_LABEL_ONLY } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_LABEL_ONLY)}
  />

{
  _style: {
    entity: 'rounded=1;align=center;fillColor=#F1F2F4;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#596780;fontSize=12',
  },
  _width: 0,
  _height: 33,
}

Button (Link)

Preview
Usage
Definition

import { ButtonLink } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonLink/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_LINK } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_LINK)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontColor=#0057D8;align=left;fontSize=12;sketch=0;',
  },
  _width: 0,
  _height: 33,
}

Button (Link) 2

Preview
Usage
Definition

import { ButtonLink2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonLink2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_LINK_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_LINK_2)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontColor=#0057D8;align=center;verticalAlign=middle;fontStyle=0;fontSize=12',
  },
  _width: 86,
  _height: 33,
}

Button (Primary)

Preview
Usage
Definition

import { ButtonPrimary } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonPrimary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_PRIMARY } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_PRIMARY)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#0057D8;align=center;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#ffffff;fontSize=12;sketch=0;',
  },
  _width: 0,
  _height: 33,
}

Button (Primary) 2

Preview
Usage
Definition

import { ButtonPrimary2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonPrimary2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_PRIMARY_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_PRIMARY_2)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.checkbox;fillColor=#008465;strokeColor=none;html=1;sketch=0;',
  },
  _width: 1,
  _height: 33,
}

Button (Primary) 3

Preview
Usage
Definition

import { ButtonPrimary3 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonPrimary3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_PRIMARY_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_PRIMARY_3)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.close;fillColor=#BA3200;strokeColor=none;html=1;sketch=0;',
  },
  _width: 1,
  _height: 33,
}

Button (Primary) 4

Preview
Usage
Definition

import { ButtonPrimary4 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonPrimary4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_PRIMARY_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_PRIMARY_4)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#0057D8;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#ffffff;align=center;verticalAlign=middle;fontStyle=0;fontSize=12;sketch=0;',
  },
  _width: 86,
  _height: 33,
}

Button (split)

Preview
Usage
Definition

import { ButtonSplit } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonSplit/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SPLIT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_SPLIT)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;strokeColor=none;html=1;fontColor=#596780;align=left;fontSize=12;spacingLeft=10;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;whiteSpace=wrap;',
  },
  _width: 80,
  _height: 33,
}

Button (Standard)

Preview
Usage
Definition

import { ButtonStandard } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonStandard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_STANDARD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_STANDARD)}
  />

{
  _style: {
    entity: 'rounded=1;align=center;fillColor=#F1F2F4;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#596780;fontSize=12;sketch=0;',
  },
  _width: 0,
  _height: 33,
}

Button (Standard) 2

Preview
Usage
Definition

import { ButtonStandard2 } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonStandard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_STANDARD_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_STANDARD_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F1F2F4;strokeColor=none;html=1;whiteSpace=wrap;fontColor=#596780;align=center;verticalAlign=middle;fontStyle=0;fontSize=12;sketch=0;',
  },
  _width: 86,
  _height: 33,
}

Button (subtle)

Preview
Usage
Definition

import { ButtonSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<ButtonSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, BUTTON_SUBTLE)}
  />

{
  _style: {
    entity: 'rounded=1;align=left;fillColor=none;strokeColor=none;html=1;fontColor=#596780;fontSize=12;spacingLeft=26;',
  },
  _width: 0,
  _height: 33,
}

Checkbox (off)

Preview
Usage
Definition

import { CheckboxOff } from '@dinghy/diagrams/entitiesAtlassian'

<CheckboxOff/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_OFF } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX_OFF)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F0F2F5;strokeColor=#D8DCE3;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;labelPosition=right;verticalLabelPosition=middle;spacingLeft=10;html=1;shadow=0;dashed=0',
  },
  _original_width: 12,
  _original_height: 12,

}

Checkbox group

Preview
Usage
Definition

import { CheckboxGroup } from '@dinghy/diagrams/entitiesAtlassian'

<CheckboxGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_GROUP } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX_GROUP)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;fontSize=11;fontStyle=1;align=left;fontColor=#596780;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 150,
  _height: 173,
}

Checkbox group 2

Preview
Usage
Definition

import { CheckboxGroup2 } from '@dinghy/diagrams/entitiesAtlassian'

<CheckboxGroup2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_GROUP_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX_GROUP_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#F0F2F5;strokeColor=#D8DCE3;fontColor=#000000;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;labelPosition=right;verticalLabelPosition=middle;spacingLeft=10;html=1;shadow=0;dashed=0;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 173,
}

Checkbox group 3

Preview
Usage
Definition

import { CheckboxGroup3 } from '@dinghy/diagrams/entitiesAtlassian'

<CheckboxGroup3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_GROUP_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX_GROUP_3)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.checkbox_2;fillColor=#0057D8;strokeColor=none;fontColor=#000000;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;labelPosition=right;verticalLabelPosition=middle;spacingLeft=10;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 173,
}

Checkbox group 4

Preview
Usage
Definition

import { CheckboxGroup4 } from '@dinghy/diagrams/entitiesAtlassian'

<CheckboxGroup4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_GROUP_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX_GROUP_4)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#0057D8;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;fontStyle=0;fontSize=14;html=1;shadow=0;dashed=0;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 5,
  _height: 173,
}

Checkbox group 5

Preview
Usage
Definition

import { CheckboxGroup5 } from '@dinghy/diagrams/entitiesAtlassian'

<CheckboxGroup5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_GROUP_5 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX_GROUP_5)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;fontStyle=0;fontSize=14;html=1;shadow=0;dashed=0;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 6,
  _height: 173,
}

Clover

Preview
Usage
Definition

import { Clover } from '@dinghy/diagrams/entitiesAtlassian'

<Clover/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CLOVER } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CLOVER)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Clover_Logo.svg;strokeColor=none;',
  },
  _original_width: 71,
  _original_height: 71,

}

Comment

Preview
Usage
Definition

import { Comment } from '@dinghy/diagrams/entitiesAtlassian'

<Comment/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT)}
  />

{
  _style: {
    entity: 'shape=mxgraph.ios7.icons.user;fillColor=#ffffff;strokeColor=#253858',
  },
  _width: 470,
  _height: 125,
}

Comment 10

Preview
Usage
Definition

import { Comment10 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment10/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_10 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_10)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#000000;whiteSpace=wrap;verticalAlign=top;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 6,
  _height: 213,
}

Comment 11

Preview
Usage
Definition

import { Comment11 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment11/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_11 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_11)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;align=left;spacingLeft=5;strokeColor=#DEE1E6;html=1;strokeWidth=2;fontColor=#596780;fontSize=12;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 9,
  _height: 213,
}

Comment 2

Preview
Usage
Definition

import { Comment2 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_2)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#000000;whiteSpace=wrap',
  },
  _width: 1,
  _height: 125,
}

Comment 3

Preview
Usage
Definition

import { Comment3 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_3)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#F2F3F5;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=1;html=1',
  },
  _width: 2,
  _height: 125,
}

Comment 4

Preview
Usage
Definition

import { Comment4 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_4)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#596780;whiteSpace=wrap',
  },
  _width: 3,
  _height: 125,
}

Comment 5

Preview
Usage
Definition

import { Comment5 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_5 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_5)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#000000;whiteSpace=wrap;verticalAlign=top',
  },
  _width: 5,
  _height: 125,
}

Comment 6

Preview
Usage
Definition

import { Comment6 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_6 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_6)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=15;align=left;fontColor=#000000;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 320,
  _height: 213,
}

Comment 7

Preview
Usage
Definition

import { Comment7 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_7 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_7)}
  />

{
  _style: {
    entity: 'shape=line;strokeColor=#596780;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 1,
  _height: 213,
}

Comment 8

Preview
Usage
Definition

import { Comment8 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_8 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_8)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#000000;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 3,
  _height: 213,
}

Comment 9

Preview
Usage
Definition

import { Comment9 } from '@dinghy/diagrams/entitiesAtlassian'

<Comment9/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMENT_9 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMMENT_9)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#596780;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 4,
  _height: 213,
}

Compact text field

Preview
Usage
Definition

import { CompactTextField } from '@dinghy/diagrams/entitiesAtlassian'

<CompactTextField/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPACT_TEXT_FIELD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMPACT_TEXT_FIELD)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#F7F8F9;align=left;spacingLeft=5;strokeColor=#DEE1E6;html=1;strokeWidth=2;fontSize=12',
  },
  _width: 1,
  _height: 58,
}

Compact text field 2

Preview
Usage
Definition

import { CompactTextField2 } from '@dinghy/diagrams/entitiesAtlassian'

<CompactTextField2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPACT_TEXT_FIELD_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, COMPACT_TEXT_FIELD_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#F7F8F9;align=left;spacingLeft=5;strokeColor=#DEE1E6;html=1;strokeWidth=2;fontColor=#596780;fontSize=12',
  },
  _width: 1,
  _height: 58,
}

Confluence

Preview
Usage
Definition

import { Confluence } from '@dinghy/diagrams/entitiesAtlassian'

<Confluence/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONFLUENCE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CONFLUENCE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Confluence_Logo.svg;strokeColor=none;',
  },
  _original_width: 63,
  _original_height: 57,

}

Container Avatar (Large)

Preview
Usage
Definition

import { ContainerAvatarLarge } from '@dinghy/diagrams/entitiesAtlassian'

<ContainerAvatarLarge/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONTAINER_AVATAR_LARGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CONTAINER_AVATAR_LARGE)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#0065FF;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=14;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 40,
  _original_height: 40,

}

Container Avatar (Medium)

Preview
Usage
Definition

import { ContainerAvatarMedium } from '@dinghy/diagrams/entitiesAtlassian'

<ContainerAvatarMedium/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONTAINER_AVATAR_MEDIUM } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CONTAINER_AVATAR_MEDIUM)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#0065FF;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 32,
  _original_height: 32,

}

Container Avatar (Small)

Preview
Usage
Definition

import { ContainerAvatarSmall } from '@dinghy/diagrams/entitiesAtlassian'

<ContainerAvatarSmall/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONTAINER_AVATAR_SMALL } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CONTAINER_AVATAR_SMALL)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#0065FF;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=1;html=1;sketch=0;',
  },
  _original_width: 24,
  _original_height: 24,

}

Crowd

Preview
Usage
Definition

import { Crowd } from '@dinghy/diagrams/entitiesAtlassian'

<Crowd/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CROWD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CROWD)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Crowd_Logo.svg;strokeColor=none;',
  },
  _original_width: 66,
  _original_height: 65,

}

Crucible

Preview
Usage
Definition

import { Crucible } from '@dinghy/diagrams/entitiesAtlassian'

<Crucible/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CRUCIBLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, CRUCIBLE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Crucible_Logo.svg;strokeColor=none;',
  },
  _original_width: 61,
  _original_height: 61,

}

Date picker

Preview
Usage
Definition

import { DatePicker } from '@dinghy/diagrams/entitiesAtlassian'

<DatePicker/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATE_PICKER } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DATE_PICKER)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#596780;fontStyle=1;fontSize=11;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 240,
  _height: 58,
}

Date picker 2

Preview
Usage
Definition

import { DatePicker2 } from '@dinghy/diagrams/entitiesAtlassian'

<DatePicker2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATE_PICKER_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DATE_PICKER_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#F7F8F9;align=left;spacingLeft=5;strokeColor=#DEE1E6;html=1;strokeWidth=2;fontColor=#596780;fontSize=12;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 58,
}

Date picker 3

Preview
Usage
Definition

import { DatePicker3 } from '@dinghy/diagrams/entitiesAtlassian'

<DatePicker3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATE_PICKER_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DATE_PICKER_3)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;align=left;spacingLeft=5;strokeColor=#0057D8;html=1;strokeWidth=2;fontColor=#253858;fontSize=12',
  },
  _width: 1,
  _height: 415,
}

Date picker 4

Preview
Usage
Definition

import { DatePicker4 } from '@dinghy/diagrams/entitiesAtlassian'

<DatePicker4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATE_PICKER_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DATE_PICKER_4)}
  />

{
  _style: {
    entity: 'shape=mxgraph.mockup.forms.rrect;rSize=5;strokeColor=#DFE1E5;fillColor=#ffffff;shadow=1',
  },
  _width: 2,
  _height: 415,
}

Disabled text field

Preview
Usage
Definition

import { DisabledTextField } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#B3BAC5;fontStyle=1;fontSize=11',
  },
  _width: 0,
  _height: 58,
}

Disabled text field 2

Preview
Usage
Definition

import { DisabledTextField2 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#F7F8F9;align=left;spacingLeft=5;strokeColor=#DEE1E6;html=1;strokeWidth=2;fontColor=#B3BAC5;fontSize=12',
  },
  _width: 1,
  _height: 58,
}

Disabled text field 3

Preview
Usage
Definition

import { DisabledTextField3 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_3)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#172B4C;fontStyle=1;fontSize=18;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 370,
  _height: 543,
}

Disabled text field 4

Preview
Usage
Definition

import { DisabledTextField4 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_4)}
  />

{
  _style: {
    entity: 'fillColor=none;align=left;strokeColor=none;fontColor=#000000;fontSize=12;html=1;whiteSpace=wrap;verticalAlign=top;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 543,
}

Disabled text field 5

Preview
Usage
Definition

import { DisabledTextField5 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_5 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_5)}
  />

{
  _style: {
    entity: 'fillColor=#CCE0FF;strokeColor=none;html=1;fontSize=11;align=center;fontColor=#4C9AFF;fontStyle=1;fontSize=11;rounded=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 5,
  _height: 543,
}

Disabled text field 6

Preview
Usage
Definition

import { DisabledTextField6 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_6 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_6)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=4;fillColor=#F7F8F9;align=left;spacingLeft=5;strokeColor=#DEE1E6;html=1;strokeWidth=2;fontColor=#596780;fontSize=12;verticalAlign=top;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 8,
  _height: 543,
}

Disabled text field 7

Preview
Usage
Definition

import { DisabledTextField7 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_7 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_7)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#172B4C;fontStyle=1;fontSize=14;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 9,
  _height: 543,
}

Disabled text field 8

Preview
Usage
Definition

import { DisabledTextField8 } from '@dinghy/diagrams/entitiesAtlassian'

<DisabledTextField8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISABLED_TEXT_FIELD_8 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DISABLED_TEXT_FIELD_8)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#172B4C;fontStyle=0;fontSize=12;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 10,
  _height: 543,
}

Dot Badge

Preview
Usage
Definition

import { DotBadge } from '@dinghy/diagrams/entitiesAtlassian'

<DotBadge/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOT_BADGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, DOT_BADGE)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#0065FF;strokeColor=none;html=1;sketch=0;',
  },
  _original_width: 10,
  _original_height: 10,

}

Error message

Preview
Usage
Definition

import { ErrorMessage } from '@dinghy/diagrams/entitiesAtlassian'

<ErrorMessage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ERROR_MESSAGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ERROR_MESSAGE)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#596780;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 340,
  _height: 150,
}

Error message 2

Preview
Usage
Definition

import { ErrorMessage2 } from '@dinghy/diagrams/entitiesAtlassian'

<ErrorMessage2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ERROR_MESSAGE_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ERROR_MESSAGE_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;strokeColor=#4C9AFF;html=1;strokeWidth=2;spacingLeft=5;fontColor=#000000;align=left;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 1,
  _height: 150,
}

Error message 3

Preview
Usage
Definition

import { ErrorMessage3 } from '@dinghy/diagrams/entitiesAtlassian'

<ErrorMessage3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ERROR_MESSAGE_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ERROR_MESSAGE_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;arcSize=1;fontSize=12;fontColor=#596780;align=center;html=1;verticalAlign=top;spacingTop=5;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 150,
}

Error message field

Preview
Usage
Definition

import { ErrorMessageField } from '@dinghy/diagrams/entitiesAtlassian'

<ErrorMessageField/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ERROR_MESSAGE_FIELD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ERROR_MESSAGE_FIELD)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;align=left;spacingLeft=5;strokeColor=#FFAB00;html=1;strokeWidth=2;fontSize=12',
  },
  _width: 1,
  _height: 58,
}

Error message field 2

Preview
Usage
Definition

import { ErrorMessageField2 } from '@dinghy/diagrams/entitiesAtlassian'

<ErrorMessageField2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ERROR_MESSAGE_FIELD_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ERROR_MESSAGE_FIELD_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;align=center;strokeColor=#DFE1E5;html=1;strokeWidth=1;fontSize=12;shadow=1',
  },
  _width: 2,
  _height: 68,
}

Fisheye

Preview
Usage
Definition

import { Fisheye } from '@dinghy/diagrams/entitiesAtlassian'

<Fisheye/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FISHEYE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, FISHEYE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Fisheye_Logo.svg;strokeColor=none;',
  },
  _original_width: 71,
  _original_height: 59,

}

Hipchat

Preview
Usage
Definition

import { Hipchat } from '@dinghy/diagrams/entitiesAtlassian'

<Hipchat/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HIPCHAT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, HIPCHAT)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Hipchat_Logo.svg;strokeColor=none;',
  },
  _original_width: 66,
  _original_height: 62,

}

Inline dialog

Preview
Usage
Definition

import { InlineDialog } from '@dinghy/diagrams/entitiesAtlassian'

<InlineDialog/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_DIALOG } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_DIALOG)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#42526E;strokeColor=none;shadow=0;html=1;arcSize=12;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 1,
  _height: 228,
}

Inline dialog 2

Preview
Usage
Definition

import { InlineDialog2 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineDialog2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_DIALOG_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_DIALOG_2)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#DEE1E6;strokeColor=none;shadow=0;html=1;arcSize=50;fontSize=12;align=center;verticalAlign=middle',
  },
  _width: 340,
  _height: 450,
}

Inline dialog 3

Preview
Usage
Definition

import { InlineDialog3 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineDialog3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_DIALOG_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_DIALOG_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=none;strokeColor=none;shadow=0;html=1;arcSize=50;fontSize=12;align=left;verticalAlign=middle;spacingLeft=10',
  },
  _width: 1,
  _height: 450,
}

Inline dialog 4

Preview
Usage
Definition

import { InlineDialog4 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineDialog4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_DIALOG_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_DIALOG_4)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;html=1;arcSize=1;fontFamily=Verdana;fontSize=14;fontColor=#000000;align=left;',
  },
  _width: 2,
  _height: 450,
}

Inline edit

Preview
Usage
Definition

import { InlineEdit } from '@dinghy/diagrams/entitiesAtlassian'

<InlineEdit/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_EDIT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_EDIT)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#596780;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 350,
  _height: 55,
}

Inline edit 2

Preview
Usage
Definition

import { InlineEdit2 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineEdit2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_EDIT_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_EDIT_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#253858;strokeColor=none;html=1;strokeWidth=2;spacingLeft=30;fontColor=#ffffff;align=left;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 1,
  _height: 55,
}

Inline edit 3

Preview
Usage
Definition

import { InlineEdit3 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineEdit3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_EDIT_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_EDIT_3)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=3;fillColor=#ffffff;strokeColor=#DFE1E5;strokeWidth=1;shadow=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 2,
  _height: 55,
}

Inline edit 4

Preview
Usage
Definition

import { InlineEdit4 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineEdit4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_EDIT_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_EDIT_4)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;strokeColor=#4C9AFF;html=1;strokeWidth=2;spacingLeft=30;fontColor=#000000;align=left;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 1,
  _height: 60,
}

Inline edit 5

Preview
Usage
Definition

import { InlineEdit5 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineEdit5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_EDIT_5 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_EDIT_5)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.check;strokeColor=#42526E;strokeWidth=2;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 2,
  _height: 60,
}

Inline edit 6

Preview
Usage
Definition

import { InlineEdit6 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineEdit6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_EDIT_6 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_EDIT_6)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.x;strokeColor=#42526E;strokeWidth=2;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 3,
  _height: 60,
}

Inline message

Preview
Usage
Definition

import { InlineMessage } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;fontSize=11;fontStyle=1;align=left;fontColor=#596780;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 460,
  _height: 180,
}

Inline message 2

Preview
Usage
Definition

import { InlineMessage2 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessage2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE_2)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;fontSize=12;fontStyle=0;align=left;fontColor=#000000;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 5,
  _height: 180,
}

Inline message 3

Preview
Usage
Definition

import { InlineMessage3 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessage3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE_3)}
  />

{
  _style: {
    entity: 'shape=mxgraph.azure.azure_alert;fillColor=#FF8B00;strokeColor=none;fontColor=#172B4C;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;html=1;spacingLeft=5;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 6,
  _height: 180,
}

Inline message 4

Preview
Usage
Definition

import { InlineMessage4 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessage4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE_4)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=3;fillColor=#ffffff;strokeColor=#DFE1E5;strokeWidth=1;shadow=1;align=left;html=1;whiteSpace=wrap;spacingLeft=20;spacingRight=20;fontSize=12;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 7,
  _height: 180,
}

Inline message with subtitle

Preview
Usage
Definition

import { InlineMessageWithSubtitle } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessageWithSubtitle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE_WITH_SUBTITLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE_WITH_SUBTITLE)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#403294;strokeColor=none;fontSize=14;fontStyle=1;align=center;fontColor=#ffffff;sketch=0;',
  },
  _width: 0,
  _height: 63,
}

Inline message with subtitle 2

Preview
Usage
Definition

import { InlineMessageWithSubtitle2 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessageWithSubtitle2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE_WITH_SUBTITLE_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE_WITH_SUBTITLE_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=3;fillColor=#ffffff;strokeColor=#DFE1E5;strokeWidth=1;shadow=1;align=left;html=1;whiteSpace=wrap;spacingLeft=20;spacingRight=20;fontSize=12;',
  },
  _width: 1,
  _height: 63,
}

Inline message with subtitle 3

Preview
Usage
Definition

import { InlineMessageWithSubtitle3 } from '@dinghy/diagrams/entitiesAtlassian'

<InlineMessageWithSubtitle3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_MESSAGE_WITH_SUBTITLE_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, INLINE_MESSAGE_WITH_SUBTITLE_3)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;html=1;whiteSpace=wrap;fontSize=11;fontColor=#596780',
  },
  _width: 2,
  _height: 63,
}

Issue

Preview
Usage
Definition

import { Issue } from '@dinghy/diagrams/entitiesAtlassian'

<Issue/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ISSUE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, ISSUE)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.issue;issueType=story;issuePriority=blocker;issueStatus=inProgress;verticalAlign=top;align=left;whiteSpace=wrap;overflow=hidden;spacingTop=25;strokeColor=#A8ADB0;fillColor=#EEEEEE;fontSize=12;backgroundOutline=1;sketch=0;',
  },
  _width: 0,
  _height: 50,
}

Jira

Preview
Usage
Definition

import { Jira } from '@dinghy/diagrams/entitiesAtlassian'

<Jira/>

// or

import { extendStyle } from "@dinghy/base-components";
import { JIRA } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, JIRA)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Jira_Logo.svg;strokeColor=none;',
  },
  _original_width: 72,
  _original_height: 72,

}

Jira Core

Preview
Usage
Definition

import { JiraCore } from '@dinghy/diagrams/entitiesAtlassian'

<JiraCore/>

// or

import { extendStyle } from "@dinghy/base-components";
import { JIRA_CORE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, JIRA_CORE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Jira_Core_Logo.svg;strokeColor=none;',
  },
  _original_width: 55,
  _original_height: 66,

}

Jira Service Desk

Preview
Usage
Definition

import { JiraServiceDesk } from '@dinghy/diagrams/entitiesAtlassian'

<JiraServiceDesk/>

// or

import { extendStyle } from "@dinghy/base-components";
import { JIRA_SERVICE_DESK } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, JIRA_SERVICE_DESK)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Jira_Service_Desk_Logo.svg;strokeColor=none;',
  },
  _original_width: 59,
  _original_height: 76,

}

Jira Software

Preview
Usage
Definition

import { JiraSoftware } from '@dinghy/diagrams/entitiesAtlassian'

<JiraSoftware/>

// or

import { extendStyle } from "@dinghy/base-components";
import { JIRA_SOFTWARE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, JIRA_SOFTWARE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Jira_Software_Logo.svg;strokeColor=none;',
  },
  _original_width: 74,
  _original_height: 76,

}

Linear discussion

Preview
Usage
Definition

import { LinearDiscussion } from '@dinghy/diagrams/entitiesAtlassian'

<LinearDiscussion/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LINEAR_DISCUSSION } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LINEAR_DISCUSSION)}
  />

{
  _style: {
    entity: 'shape=mxgraph.ios7.icons.user;fillColor=#ffffff;strokeColor=#253858;fontSize=12;align=left;fontColor=#000000;labelPosition=right;html=1;verticalAlign=top;spacingTop=-10;spacingLeft=5',
  },
  _width: 470,
  _height: 125,
}

Lozenge (current, bold)

Preview
Usage
Definition

import { LozengeCurrentBold } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeCurrentBold/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_CURRENT_BOLD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_CURRENT_BOLD)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#0057D8;strokeColor=#0057D8;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#ffffff',
  },
  _width: 100,
  _height: 20,
}

Lozenge (current, subtle)

Preview
Usage
Definition

import { LozengeCurrentSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeCurrentSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_CURRENT_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_CURRENT_SUBTLE)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;strokeColor=#0057D8;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#0057D8',
  },
  _width: 100,
  _height: 20,
}

Lozenge (moved, bold)

Preview
Usage
Definition

import { LozengeMovedBold } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeMovedBold/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_MOVED_BOLD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_MOVED_BOLD)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#FFAB00;strokeColor=#FFAB00;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#42526E',
  },
  _width: 60,
  _height: 20,
}

Lozenge (moved, subtle)

Preview
Usage
Definition

import { LozengeMovedSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeMovedSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_MOVED_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_MOVED_SUBTLE)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;strokeColor=#FFAB00;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#42526E',
  },
  _width: 60,
  _height: 20,
}

Lozenge (new, bold)

Preview
Usage
Definition

import { LozengeNewBold } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeNewBold/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_NEW_BOLD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_NEW_BOLD)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#6554C0;strokeColor=#6554C0;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#ffffff',
  },
  _width: 50,
  _height: 20,
}

Lozenge (new, subtle)

Preview
Usage
Definition

import { LozengeNewSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeNewSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_NEW_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_NEW_SUBTLE)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;strokeColor=#6554C0;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#6554C0',
  },
  _width: 50,
  _height: 20,
}

Lozenge (problem, bold)

Preview
Usage
Definition

import { LozengeProblemBold } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeProblemBold/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_PROBLEM_BOLD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_PROBLEM_BOLD)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#BA3200;strokeColor=#BA3200;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#ffffff',
  },
  _width: 70,
  _height: 20,
}

Lozenge (problem, subtle)

Preview
Usage
Definition

import { LozengeProblemSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeProblemSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_PROBLEM_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_PROBLEM_SUBTLE)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;strokeColor=#BA3200;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#BA3200',
  },
  _width: 70,
  _height: 20,
}

Lozenge (state, bold)

Preview
Usage
Definition

import { LozengeStateBold } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeStateBold/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_STATE_BOLD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_STATE_BOLD)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#DFE1E6;strokeColor=#DFE1E6;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#42526E',
  },
  _width: 70,
  _height: 20,
}

Lozenge (state, subtle)

Preview
Usage
Definition

import { LozengeStateSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeStateSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_STATE_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_STATE_SUBTLE)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;strokeColor=#DFE1E6;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#42526E',
  },
  _width: 70,
  _height: 20,
}

Lozenge (success, bold)

Preview
Usage
Definition

import { LozengeSuccessBold } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeSuccessBold/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_SUCCESS_BOLD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_SUCCESS_BOLD)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#008364;strokeColor=#008364;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#ffffff',
  },
  _width: 70,
  _height: 20,
}

Lozenge (success, subtle)

Preview
Usage
Definition

import { LozengeSuccessSubtle } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeSuccessSubtle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_SUCCESS_SUBTLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_SUCCESS_SUBTLE)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;strokeColor=#008364;fontSize=12;align=center;fontStyle=1;strokeWidth=2;fontColor=#008364',
  },
  _width: 70,
  _height: 20,
}

Preview
Usage
Definition

import { LozengeTooltip } from '@dinghy/diagrams/entitiesAtlassian'

<LozengeTooltip/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOZENGE_TOOLTIP } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, LOZENGE_TOOLTIP)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;rounded=1;fillColor=#172B4D;strokeColor=#172B4D;fontSize=12;align=center;fontStyle=0;strokeWidth=2;fontColor=#ffffff',
  },
  _width: 0,
  _height: 50,
}

Preview
Usage
Definition

import { ModalDialog } from '@dinghy/diagrams/entitiesAtlassian'

<ModalDialog/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MODAL_DIALOG } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MODAL_DIALOG)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=12;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;spacing=20;verticalAlign=top;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 330,
  _height: 210,
}

Preview
Usage
Definition

import { ModalDialogDetailed } from '@dinghy/diagrams/entitiesAtlassian'

<ModalDialogDetailed/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MODAL_DIALOG_DETAILED } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MODAL_DIALOG_DETAILED)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=12;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;spacing=20;verticalAlign=top',
  },
  _width: 330,
  _height: 210,
}

Preview
Usage
Definition

import { ModalDialogError } from '@dinghy/diagrams/entitiesAtlassian'

<ModalDialogError/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MODAL_DIALOG_ERROR } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MODAL_DIALOG_ERROR)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=12;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;spacing=20;verticalAlign=top;spacingTop=30;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 470,
  _height: 190,
}

Preview
Usage
Definition

import { ModalDialogSmall } from '@dinghy/diagrams/entitiesAtlassian'

<ModalDialogSmall/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MODAL_DIALOG_SMALL } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MODAL_DIALOG_SMALL)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=20;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;spacing=20;verticalAlign=top;fontStyle=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _original_width: 410,
  _original_height: 410,

}

Multi-select

Preview
Usage
Definition

import { MultiSelect } from '@dinghy/diagrams/entitiesAtlassian'

<MultiSelect/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTI_SELECT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MULTI_SELECT)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#596780;whiteSpace=wrap;',
  },
  _width: 270,
  _height: 390,
}

Multi-select 2

Preview
Usage
Definition

import { MultiSelect2 } from '@dinghy/diagrams/entitiesAtlassian'

<MultiSelect2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTI_SELECT_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MULTI_SELECT_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;strokeColor=#4C9AFF;html=1;strokeWidth=2;spacingLeft=30;fontColor=#000000;align=left',
  },
  _width: 1,
  _height: 390,
}

Multi-select 3

Preview
Usage
Definition

import { MultiSelect3 } from '@dinghy/diagrams/entitiesAtlassian'

<MultiSelect3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTI_SELECT_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MULTI_SELECT_3)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=12;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;spacing=2;verticalAlign=top;fontStyle=0;spacingLeft=20;spacingTop=15;',
  },
  _width: 2,
  _height: 390,
}

Multi-select with avatars

Preview
Usage
Definition

import { MultiSelectWithAvatars } from '@dinghy/diagrams/entitiesAtlassian'

<MultiSelectWithAvatars/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTI_SELECT_WITH_AVATARS } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MULTI_SELECT_WITH_AVATARS)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;arcSize=1',
  },
  _width: 2,
  _height: 320,
}

Multiple flag message

Preview
Usage
Definition

import { MultipleFlagMessage } from '@dinghy/diagrams/entitiesAtlassian'

<MultipleFlagMessage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTIPLE_FLAG_MESSAGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, MULTIPLE_FLAG_MESSAGE)}
  />

{
  _style: {
    entity: ' rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;html=1;arcSize=4;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 333,
  _height: 150,
}

Progress tracker

Preview
Usage
Definition

import { ProgressTracker } from '@dinghy/diagrams/entitiesAtlassian'

<ProgressTracker/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROGRESS_TRACKER } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, PROGRESS_TRACKER)}
  />

{
  _style: {
    entity: 'fillColor=#0065FF;strokeColor=none;shadow=0;rounded=1;arcSize=50;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 470,
  _height: 30,
}

Progress tracker 2

Preview
Usage
Definition

import { ProgressTracker2 } from '@dinghy/diagrams/entitiesAtlassian'

<ProgressTracker2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROGRESS_TRACKER_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, PROGRESS_TRACKER_2)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#000000;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 30,
}

Progress tracker 3

Preview
Usage
Definition

import { ProgressTracker3 } from '@dinghy/diagrams/entitiesAtlassian'

<ProgressTracker3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROGRESS_TRACKER_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, PROGRESS_TRACKER_3)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#0065FF;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 3,
  _height: 30,
}

Progress tracker 4

Preview
Usage
Definition

import { ProgressTracker4 } from '@dinghy/diagrams/entitiesAtlassian'

<ProgressTracker4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROGRESS_TRACKER_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, PROGRESS_TRACKER_4)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#A5ADBA;strokeColor=none;shadow=0;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 5,
  _height: 30,
}

Radio button group

Preview
Usage
Definition

import { RadioButtonGroup } from '@dinghy/diagrams/entitiesAtlassian'

<RadioButtonGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_GROUP } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, RADIO_BUTTON_GROUP)}
  />

{
  _style: {
    entity: 'shape=ellipse;rounded=1;fillColor=#F0F2F5;strokeColor=#D8DCE3;fontColor=#000000;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;labelPosition=right;verticalLabelPosition=middle;spacingLeft=10;html=1;shadow=0;dashed=0;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 173,
}

Radio button group 2

Preview
Usage
Definition

import { RadioButtonGroup2 } from '@dinghy/diagrams/entitiesAtlassian'

<RadioButtonGroup2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_GROUP_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, RADIO_BUTTON_GROUP_2)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#ffffff;strokeColor=#0057D8;strokeWidth=4;fontColor=#000000;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;labelPosition=right;verticalLabelPosition=middle;spacingLeft=10;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 173,
}

Radio button group 3

Preview
Usage
Definition

import { RadioButtonGroup3 } from '@dinghy/diagrams/entitiesAtlassian'

<RadioButtonGroup3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_GROUP_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, RADIO_BUTTON_GROUP_3)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;fontStyle=0;fontSize=14;html=1;shadow=0;dashed=0;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 5,
  _height: 173,
}

Removable tag

Preview
Usage
Definition

import { RemovableTag } from '@dinghy/diagrams/entitiesAtlassian'

<RemovableTag/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REMOVABLE_TAG } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, REMOVABLE_TAG)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;fillColor=#F0F2F5;strokeColor=none;align=left;rounded=1;arcSize=10;fontColor=#596780;fontStyle=1;fontSize=11;shadow=0;spacingLeft=3',
  },
  _width: 0,
  _height: 20,
}

Removable tag link

Preview
Usage
Definition

import { RemovableTagLink } from '@dinghy/diagrams/entitiesAtlassian'

<RemovableTagLink/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REMOVABLE_TAG_LINK } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, REMOVABLE_TAG_LINK)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;fillColor=#F0F2F5;strokeColor=none;align=left;rounded=1;arcSize=10;fontColor=#3384FF;fontStyle=1;fontSize=11;shadow=0;spacingLeft=3',
  },
  _width: 0,
  _height: 20,
}

Single select

Preview
Usage
Definition

import { SingleSelect } from '@dinghy/diagrams/entitiesAtlassian'

<SingleSelect/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SINGLE_SELECT } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SINGLE_SELECT)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=12;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;spacing=2;verticalAlign=top;fontStyle=0;spacingLeft=20;spacingTop=15;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 320,
}

Single select (grouped)

Preview
Usage
Definition

import { SingleSelectGrouped } from '@dinghy/diagrams/entitiesAtlassian'

<SingleSelectGrouped/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SINGLE_SELECT_GROUPED } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SINGLE_SELECT_GROUPED)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#596780;whiteSpace=wrap',
  },
  _width: 360,
  _height: 260,
}

Single select (grouped) 2

Preview
Usage
Definition

import { SingleSelectGrouped2 } from '@dinghy/diagrams/entitiesAtlassian'

<SingleSelectGrouped2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SINGLE_SELECT_GROUPED_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SINGLE_SELECT_GROUPED_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;strokeColor=#4C9AFF;html=1;strokeWidth=2;spacingLeft=5;fontColor=#000000;align=left',
  },
  _width: 1,
  _height: 260,
}

Single select (grouped) 3

Preview
Usage
Definition

import { SingleSelectGrouped3 } from '@dinghy/diagrams/entitiesAtlassian'

<SingleSelectGrouped3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SINGLE_SELECT_GROUPED_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SINGLE_SELECT_GROUPED_3)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;shadow=1;arcSize=1;fontSize=12;fontColor=#596780;align=center;html=1;verticalAlign=top;spacingTop=5;',
  },
  _width: 2,
  _height: 260,
}

Sourcetree

Preview
Usage
Definition

import { Sourcetree } from '@dinghy/diagrams/entitiesAtlassian'

<Sourcetree/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SOURCETREE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SOURCETREE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Sourcetree_Logo.svg;strokeColor=none;',
  },
  _original_width: 57,
  _original_height: 71,

}

Statuspage

Preview
Usage
Definition

import { Statuspage } from '@dinghy/diagrams/entitiesAtlassian'

<Statuspage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STATUSPAGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, STATUSPAGE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Statuspage_Logo.svg;strokeColor=none;',
  },
  _width: 75,
  _height: 52,
}

Stride

Preview
Usage
Definition

import { Stride } from '@dinghy/diagrams/entitiesAtlassian'

<Stride/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STRIDE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, STRIDE)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Stride_Logo.svg;strokeColor=none;',
  },
  _original_width: 69,
  _original_height: 57,

}

Subtle Badge

Preview
Usage
Definition

import { SubtleBadge } from '@dinghy/diagrams/entitiesAtlassian'

<SubtleBadge/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUBTLE_BADGE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SUBTLE_BADGE)}
  />

{
  _style: {
    entity: 'rounded=1;fillColor=#E3FCEF;strokeColor=none;html=1;fontColor=#016745;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=18;fontStyle=0;arcSize=50;sketch=0;',
  },
  _width: 40,
  _height: 25,
}

Subtle toggle

Preview
Usage
Definition

import { SubtleToggle } from '@dinghy/diagrams/entitiesAtlassian'

<SubtleToggle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUBTLE_TOGGLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, SUBTLE_TOGGLE)}
  />

{
  _style: {
    entity: 'fillColor=#36B37E;strokeColor=none;rounded=1;arcSize=50;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 30,
  _height: 16,
}

Table

Preview
Usage
Definition

import { Table } from '@dinghy/diagrams/entitiesAtlassian'

<Table/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE)}
  />

{
  _style: {
    entity: 'shape=line;strokeWidth=2;html=1;strokeColor=#DFE1E5;resizeWidth=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 2,
  _height: 230,
}

Table 10

Preview
Usage
Definition

import { Table10 } from '@dinghy/diagrams/entitiesAtlassian'

<Table10/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_10 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_10)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#F2F3F5;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 7,
  _height: 230,
}

Table 11

Preview
Usage
Definition

import { Table11 } from '@dinghy/diagrams/entitiesAtlassian'

<Table11/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_11 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_11)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#F0F2F5;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 8,
  _height: 230,
}

Table 12

Preview
Usage
Definition

import { Table12 } from '@dinghy/diagrams/entitiesAtlassian'

<Table12/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_12 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_12)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#0057D8;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 11,
  _height: 230,
}

Table 13

Preview
Usage
Definition

import { Table13 } from '@dinghy/diagrams/entitiesAtlassian'

<Table13/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_13 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_13)}
  />

{
  _style: {
    entity: 'shape=mxgraph.arrows2.sharpArrow2;dy1=0.82;dx1=4.02;dx2=5.92;dy3=0.26;dx3=7.37;notch=0;strokeColor=none;fillColor=#C1C7D0;direction=east;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 14,
  _height: 230,
}

Table 14

Preview
Usage
Definition

import { Table14 } from '@dinghy/diagrams/entitiesAtlassian'

<Table14/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_14 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_14)}
  />

{
  _style: {
    entity: 'shape=rect;rounded=1;arcSize=5;fillColor=#F2F3F5;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 15,
  _height: 230,
}

Table 15

Preview
Usage
Definition

import { Table15 } from '@dinghy/diagrams/entitiesAtlassian'

<Table15/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_15 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_15)}
  />

{
  _style: {
    entity: 'shape=mxgraph.basic.oval_callout;fillColor=#596780;strokeColor=none;fontColor=#596780;align=left;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;labelPosition=right;verticalLabelPosition=middle;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 16,
  _height: 230,
}

Table 16

Preview
Usage
Definition

import { Table16 } from '@dinghy/diagrams/entitiesAtlassian'

<Table16/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_16 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_16)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#0057D8;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;flipH=1;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 20,
  _height: 230,
}

Table 17

Preview
Usage
Definition

import { Table17 } from '@dinghy/diagrams/entitiesAtlassian'

<Table17/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_17 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_17)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#596780;whiteSpace=wrap;fontStyle=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 27,
  _height: 230,
}

Table 18

Preview
Usage
Definition

import { Table18 } from '@dinghy/diagrams/entitiesAtlassian'

<Table18/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_18 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_18)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#F2F3F5;strokeColor=none;fontColor=#A5ADBA;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 29,
  _height: 230,
}

Table 19

Preview
Usage
Definition

import { Table19 } from '@dinghy/diagrams/entitiesAtlassian'

<Table19/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_19 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_19)}
  />

{
  _style: {
    entity: 'shape=mxgraph.basic.oval_callout;fillColor=#A5ADBA;strokeColor=none;fontColor=#596780;align=left;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;labelPosition=right;verticalLabelPosition=middle;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 30,
  _height: 230,
}

Table 2

Preview
Usage
Definition

import { Table2 } from '@dinghy/diagrams/entitiesAtlassian'

<Table2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#59ADDF;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 3,
  _height: 230,
}

Table 20

Preview
Usage
Definition

import { Table20 } from '@dinghy/diagrams/entitiesAtlassian'

<Table20/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_20 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_20)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#A5ADBA;strokeColor=#ffffff;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 34,
  _height: 230,
}

Table 21

Preview
Usage
Definition

import { Table21 } from '@dinghy/diagrams/entitiesAtlassian'

<Table21/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_21 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_21)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.checkbox;fillColor=#A5ADBA;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 35,
  _height: 230,
}

Table 22

Preview
Usage
Definition

import { Table22 } from '@dinghy/diagrams/entitiesAtlassian'

<Table22/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_22 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_22)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#172B4D;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=0;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 36,
  _height: 230,
}

Table 23

Preview
Usage
Definition

import { Table23 } from '@dinghy/diagrams/entitiesAtlassian'

<Table23/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_23 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_23)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=right;fontColor=#596780;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 230,
}

Table 24

Preview
Usage
Definition

import { Table24 } from '@dinghy/diagrams/entitiesAtlassian'

<Table24/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_24 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_24)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=center;fontColor=#596780;whiteSpace=wrap;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 4,
  _height: 230,
}

Table 25

Preview
Usage
Definition

import { Table25 } from '@dinghy/diagrams/entitiesAtlassian'

<Table25/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_25 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_25)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=#FAFBFC;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 7,
  _height: 230,
}

Table 26

Preview
Usage
Definition

import { Table26 } from '@dinghy/diagrams/entitiesAtlassian'

<Table26/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_26 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_26)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontSize=12;fontColor=#596780;align=left;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 8,
  _height: 230,
}

Table 27

Preview
Usage
Definition

import { Table27 } from '@dinghy/diagrams/entitiesAtlassian'

<Table27/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_27 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_27)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=#EDEEEF;fontSize=11;fontColor=#596780;rounded=1;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 9,
  _height: 230,
}

Table 28

Preview
Usage
Definition

import { Table28 } from '@dinghy/diagrams/entitiesAtlassian'

<Table28/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_28 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_28)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=23;fillColor=#42526E;strokeColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 12,
  _height: 230,
}

Table 29

Preview
Usage
Definition

import { Table29 } from '@dinghy/diagrams/entitiesAtlassian'

<Table29/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_29 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_29)}
  />

{
  _style: {
    entity: 'shape=mxgraph.mockup.misc.progressBar;fillColor=#3384FF;strokeColor=none;fillColor2=#F2F2F2;barPos=80;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 14,
  _height: 230,
}

Table 3

Preview
Usage
Definition

import { Table3 } from '@dinghy/diagrams/entitiesAtlassian'

<Table3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_3)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=12;align=left;fontColor=#000000;whiteSpace=wrap;fontStyle=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 4,
  _height: 230,
}

Table 30

Preview
Usage
Definition

import { Table30 } from '@dinghy/diagrams/entitiesAtlassian'

<Table30/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_30 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_30)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontSize=10;fontColor=#596780;align=left;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 15,
  _height: 230,
}

Table 31

Preview
Usage
Definition

import { Table31 } from '@dinghy/diagrams/entitiesAtlassian'

<Table31/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_31 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_31)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontSize=10;fontColor=#596780;align=right;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 16,
  _height: 230,
}

Table 32

Preview
Usage
Definition

import { Table32 } from '@dinghy/diagrams/entitiesAtlassian'

<Table32/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_32 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_32)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=#CCE0FF;fontSize=11;fontColor=#3384FF;rounded=1;html=1;align=center;fontStyle=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 19,
  _height: 230,
}

Table 33

Preview
Usage
Definition

import { Table33 } from '@dinghy/diagrams/entitiesAtlassian'

<Table33/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_33 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_33)}
  />

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontSize=12;fontColor=#0057D8;align=left;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 42,
  _height: 230,
}

Table 34

Preview
Usage
Definition

import { Table34 } from '@dinghy/diagrams/entitiesAtlassian'

<Table34/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_34 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_34)}
  />

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.checkbox;fillColor=#008465;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 44,
  _height: 230,
}

Table 4

Preview
Usage
Definition

import { Table4 } from '@dinghy/diagrams/entitiesAtlassian'

<Table4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_4)}
  />

{
  _style: {
    entity: 'shape=mxgraph.ios7.icons.user;fillColor=#ffffff;strokeColor=#253858;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 5,
  _height: 230,
}

Table 5

Preview
Usage
Definition

import { Table5 } from '@dinghy/diagrams/entitiesAtlassian'

<Table5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_5 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_5)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#F0F2F5;strokeColor=none;fontColor=#596780;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=10;fontStyle=0;html=1;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 7,
  _height: 230,
}

Table 6

Preview
Usage
Definition

import { Table6 } from '@dinghy/diagrams/entitiesAtlassian'

<Table6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_6 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_6)}
  />

{
  _style: {
    entity: 'shape=mxgraph.office.security.lock_protected;fillColor=#5E6C84;strokeColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 8,
  _height: 230,
}

Table 7

Preview
Usage
Definition

import { Table7 } from '@dinghy/diagrams/entitiesAtlassian'

<Table7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_7 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_7)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#EA4232;strokeColor=none;fontColor=#ffffff;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 9,
  _height: 230,
}

Table 8

Preview
Usage
Definition

import { Table8 } from '@dinghy/diagrams/entitiesAtlassian'

<Table8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_8 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_8)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=5;fillColor=#F1DD3F;strokeColor=none;fontColor=#000000;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=1;html=1;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 15,
  _height: 230,
}

Table 9

Preview
Usage
Definition

import { Table9 } from '@dinghy/diagrams/entitiesAtlassian'

<Table9/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_9 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_9)}
  />

{
  _style: {
    entity: 'shape=mxgraph.arrows2.sharpArrow2;dy1=0.82;dx1=4.02;dx2=5.92;dy3=0.26;dx3=7.37;notch=0;strokeColor=none;fillColor=#C1C7D0;direction=east;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 6,
  _height: 230,
}

Table with action

Preview
Usage
Definition

import { TableWithAction } from '@dinghy/diagrams/entitiesAtlassian'

<TableWithAction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_WITH_ACTION } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_WITH_ACTION)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#3384FF;fontStyle=1;whiteSpace=wrap',
  },
  _width: 350,
  _height: 30,
}

Table with action 2

Preview
Usage
Definition

import { TableWithAction2 } from '@dinghy/diagrams/entitiesAtlassian'

<TableWithAction2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_WITH_ACTION_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_WITH_ACTION_2)}
  />

{
  _style: {
    entity: 'html=1;fillColor=none;strokeColor=none;fontSize=11;align=left;fontColor=#596780;fontStyle=1;whiteSpace=wrap',
  },
  _width: 1,
  _height: 30,
}

Table with action 3

Preview
Usage
Definition

import { TableWithAction3 } from '@dinghy/diagrams/entitiesAtlassian'

<TableWithAction3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_WITH_ACTION_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_WITH_ACTION_3)}
  />

{
  _style: {
    entity: 'shape=line;strokeWidth=2;html=1;strokeColor=#DFE1E5;resizeWidth=1',
  },
  _width: 4,
  _height: 30,
}

Table with action 4

Preview
Usage
Definition

import { TableWithAction4 } from '@dinghy/diagrams/entitiesAtlassian'

<TableWithAction4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABLE_WITH_ACTION_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TABLE_WITH_ACTION_4)}
  />

{
  _style: {
    entity: 'shape=line;strokeWidth=2;html=1;strokeColor=#3384FF;resizeWidth=1',
  },
  _width: 5,
  _height: 30,
}

Tag

Preview
Usage
Definition

import { Tag } from '@dinghy/diagrams/entitiesAtlassian'

<Tag/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TAG } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TAG)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;fillColor=#F0F2F5;strokeColor=none;align=center;rounded=1;arcSize=10;fontColor=#596780;fontStyle=1;fontSize=11;shadow=0',
  },
  _width: 60,
  _height: 20,
}

Tag link

Preview
Usage
Definition

import { TagLink } from '@dinghy/diagrams/entitiesAtlassian'

<TagLink/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TAG_LINK } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TAG_LINK)}
  />

{
  _style: {
    entity: 'dashed=0;html=1;fillColor=#F0F2F5;strokeColor=none;align=center;rounded=1;arcSize=10;fontColor=#3384FF;fontStyle=1;fontSize=11;shadow=0',
  },
  _width: 60,
  _height: 20,
}

Text field

Preview
Usage
Definition

import { TextField } from '@dinghy/diagrams/entitiesAtlassian'

<TextField/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;fontStyle=0;align=left;fontColor=#596780;fontStyle=1;fontSize=11',
  },
  _width: 0,
  _height: 58,
}

Text field 2

Preview
Usage
Definition

import { TextField2 } from '@dinghy/diagrams/entitiesAtlassian'

<TextField2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD_2)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;align=left;spacingLeft=5;strokeColor=#4C9AFF;html=1;strokeWidth=2;fontSize=12',
  },
  _width: 1,
  _height: 58,
}

Preview
Usage
Definition

import { TextFieldWithTooltip } from '@dinghy/diagrams/entitiesAtlassian'

<TextFieldWithTooltip/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD_WITH_TOOLTIP } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD_WITH_TOOLTIP)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;align=left;spacingLeft=5;strokeColor=#4C9AFF;html=1;strokeWidth=2;fontSize=12',
  },
  _width: 1,
  _height: 80,
}

Preview
Usage
Definition

import { TextFieldWithTooltip2 } from '@dinghy/diagrams/entitiesAtlassian'

<TextFieldWithTooltip2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD_WITH_TOOLTIP_2 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD_WITH_TOOLTIP_2)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;strokeColor=#DFE1E5;fontSize=12;align=left;shadow=1;arcSize=1;whiteSpace=wrap;verticalAlign=top;spacingLeft=15;spacingRight=15;spacingTop=10',
  },
  _width: 2,
  _height: 80,
}

Preview
Usage
Definition

import { TextFieldWithTooltip3 } from '@dinghy/diagrams/entitiesAtlassian'

<TextFieldWithTooltip3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD_WITH_TOOLTIP_3 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD_WITH_TOOLTIP_3)}
  />

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;html=1;fontSize=11;align=left;fontColor=#596780;fontStyle=1;fontSize=11;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 480,
  _height: 80,
}

Preview
Usage
Definition

import { TextFieldWithTooltip4 } from '@dinghy/diagrams/entitiesAtlassian'

<TextFieldWithTooltip4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD_WITH_TOOLTIP_4 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD_WITH_TOOLTIP_4)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=9;fillColor=#ffffff;align=left;spacingLeft=5;strokeColor=#4C9AFF;html=1;strokeWidth=2;fontColor=#000000;fontSize=12;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 1,
  _height: 80,
}

Preview
Usage
Definition

import { TextFieldWithTooltip5 } from '@dinghy/diagrams/entitiesAtlassian'

<TextFieldWithTooltip5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_FIELD_WITH_TOOLTIP_5 } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TEXT_FIELD_WITH_TOOLTIP_5)}
  />

{
  _style: {
    entity: 'html=1;rounded=1;fillColor=#ffffff;strokeColor=#DFE1E5;fontSize=12;align=left;fontColor=#000000;shadow=1;arcSize=1;whiteSpace=wrap;verticalAlign=top;spacingLeft=15;spacingRight=15;spacingTop=10;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;',
  },
  _width: 2,
  _height: 80,
}

Preview
Usage
Definition

import { Tooltip } from '@dinghy/diagrams/entitiesAtlassian'

<Tooltip/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TOOLTIP)}
  />

{
  _style: {
    entity: 'rounded=1;arcSize=10;fillColor=#172B4D;strokeColor=none;html=1;fontSize=11;align=center;fontColor=#ffffff;fontStyle=0;fontSize=11;sketch=0;',
  },
  _width: 65,
  _height: 20,
}

Trello

Preview
Usage
Definition

import { Trello } from '@dinghy/diagrams/entitiesAtlassian'

<Trello/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TRELLO } from '@dinghy/diagrams/entitiesAtlassian'

<Shape 
  {...props}
  _style={extendStyle(props, TRELLO)}
  />

{
  _style: {
    entity: 'image;html=1;image=img/lib/atlassian/Trello_Logo.svg;strokeColor=none;',
  },
  _original_width: 70,
  _original_height: 70,

}

Atlassian​

Avatar (Available)​

Avatar (Away)​

Avatar (Do not disturb)​

Avatar (Large)​

Avatar (Main)​

Avatar (Normal)​

Avatar (Small)​

Avatar (Tiny)​

Bamboo​

Banner​

Banner 2​

Bitbucket​

Bold Badge​

Bold toggle disabled​

Bold toggle with tooltip​

Bold toggle with tooltip 2​

Bold toggle with tooltip 3​

Breadcrumb​

Button (avatar)​

Button (avatar) 2​

Button (avatar) 3​

Button (compact)​

Button (compact) 2​

Button (disabled)​

Button (dropdown, open)​

Button (dropdown, open) 2​

Button (dropdown)​

Button (dropdown) 2​

Button (dropdown) 3​

Button (grouped, responsive)​

Button (grouped)​

Button (grouped) 2​

Button (grouped) 3​

Button (grouped) 4​

Button (icon and label)​

Button (label only)​

Button (Link)​

Button (Link) 2​

Button (Primary)​

Button (Primary) 2​

Button (Primary) 3​

Button (Primary) 4​

Button (split)​

Button (Standard)​

Button (Standard) 2​

Button (subtle)​

Checkbox (off)​

Checkbox group​

Checkbox group 2​

Checkbox group 3​

Checkbox group 4​

Checkbox group 5​

Clover​

Comment​

Comment 10​

Comment 11​

Comment 2​

Comment 3​

Comment 4​

Comment 5​

Comment 6​

Comment 7​

Comment 8​

Comment 9​

Compact text field​

Compact text field 2​

Confluence​

Container Avatar (Large)​

Container Avatar (Medium)​

Container Avatar (Small)​

Crowd​

Crucible​

Date picker​

Date picker 2​

Date picker 3​

Date picker 4​

Disabled text field​

Disabled text field 2​

Disabled text field 3​

Atlassian

Avatar (Available)

Avatar (Away)

Avatar (Do not disturb)

Avatar (Large)

Avatar (Main)

Avatar (Normal)

Avatar (Small)

Avatar (Tiny)

Bamboo

Banner

Banner 2

Bitbucket

Bold Badge

Bold toggle disabled

Bold toggle with tooltip

Bold toggle with tooltip 2

Bold toggle with tooltip 3

Breadcrumb

Button (avatar)

Button (avatar) 2

Button (avatar) 3

Button (compact)

Button (compact) 2

Button (disabled)

Button (dropdown, open)

Button (dropdown, open) 2

Button (dropdown)

Button (dropdown) 2

Button (dropdown) 3

Button (grouped, responsive)

Button (grouped)

Button (grouped) 2

Button (grouped) 3

Button (grouped) 4

Button (icon and label)

Button (label only)

Button (Link)

Button (Link) 2

Button (Primary)

Button (Primary) 2

Button (Primary) 3

Button (Primary) 4

Button (split)

Button (Standard)

Button (Standard) 2

Button (subtle)

Checkbox (off)

Checkbox group

Checkbox group 2

Checkbox group 3

Checkbox group 4

Checkbox group 5

Clover

Comment

Comment 10

Comment 11

Comment 2

Comment 3

Comment 4

Comment 5

Comment 6

Comment 7

Comment 8

Comment 9

Compact text field

Compact text field 2

Confluence

Container Avatar (Large)

Container Avatar (Medium)

Container Avatar (Small)

Crowd

Crucible

Date picker

Date picker 2

Date picker 3

Date picker 4

Disabled text field

Disabled text field 2

Disabled text field 3